(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 -05-25
