css卷轴动画小程序,CSS动画｜JavaScript动画｜小程序动画

(1)CSS3 animation 动画

// 定义动画的关键帧

@keyframes xhf {

from {

transform:scale(0.5, 0.5);

opacity:0.5;

}

to {

transform:scale(1, 1);

opacity:1;

}

}

.box {

animation: xhf 2s 1; // 动画执行2秒、执行1次

}

(2)CSS3 transition 动画

.box {

width: 100px;

height: 100px;

background: red;

/* 要执行过渡动画的属性列表 */

transition-property: width, background;

/* 过渡持续时间 */

transition-duration: 2s;

/* 动画时间函数 */

transition-timing-function: ease-in;

}

.box:hover {

width: 500px;

background: green;

}

(3)JavaScript 动画

.box {

position: absolute;

top: 0;

left: 0;

width: 100px;

height: 100px;

background: red;

}

var oBox = document.getElementById('box');

var start = null;

function step(timestamp) {

if (!start) start = timestamp;

var left = timestamp - start;

oBox.style.left = left + 'px';

if (left < 1000) {

window.requestAnimationFrame(step);

}

}

window.requestAnimationFrame(step);

(4)小程序 Animation 动画

动画一

动画二

动画三

.page {

position: absolute;

bottom: 0;

top: 0;

left: 0;

right: 0;

.box {

background:red;

height:100rpx;

width:100rpx;

}

.btns {

position: absolute;

bottom: 0;

left: 0;

right: 0;

&>view {

line-height: 100rpx;

border: 1rpx solid #999999;

text-align: center;

margin: 20rpx 0;

}

}

}

import wepy from 'wepy'

export default class Test extends wepy.page {

data = {

animationData: {} // 动画容器

}

onShow() {

this.animation = wx.createAnimation({

duration: 2000,

timingFunction: 'ease'

})

this.animation.scale(2, 2).rotate(45).translate(100).step()

// 配置好动画参数后，用 export() 方法导出动画队列

this.animationData = this.animation.export()

// 初始化动画

setTimeout(() => {

this.animation.translate(200).step()

this.animationData = this.animation.export()

}, 1000)

}

methods = {

animateExecute(type) {

switch (type) {

case '1':

this.rotateAndScale() // 第一个动画

break

case '2':

this.rotateThenScale() // 第二个动画

break

case '3':

this.rotateAndScaleThenTranslate() // 第三个动画

break

default:

break

}

}

}

rotateAndScale() {

// 旋转同时放大

this.animation.translate(80, 80).scale(1, 1).step()

this.animationData = this.animation.export()

}

rotateThenScale() {

// 先旋转后放大

this.animation.rotate(20).step()

this.animation.scale(3, 3).step()

this.animationData = this.animation.export()

}

rotateAndScaleThenTranslate() {

// 先旋转同时放大，然后平移

this.animation.rotate(-25).scale(2, 2).step()

this.animation.translate(50, 50).step({duration: 1000})

this.animationData = this.animation.export()

}

}

END 2019-05-25