开发小程序，实现动画功能，有两种实现方式，下面来看看具体怎么做：
JS动画
利用小程序API提供的wx.createAnimation(OBJECT)实现，API中是这样说：创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
wxml
{{start}}
{{end}}
css
@font-face {
font-family: 'iconfont'; /* project id 703892 */
src: url('///t/font_703892_u8zob8nchpf.eot');
src: url('///t/font_703892_u8zob8nchpf.eot?#iefix') format('embedded-opentype'),
url('///t/font_703892_u8zob8nchpf.woff') format('woff'),
url('///t/font_703892_u8zob8nchpf.ttf') format('truetype'),
url('///t/font_703892_u8zob8nchpf.svg#iconfont') format('svg');
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.animation{
margin-top: 20rpx;
padding: 10rpx 30rpx;
}
.dis-flex{
display: flex;
}
.flex1{
flex: 1;
text-align: center;
}
.flex3{
flex: 3;
text-align: center;
}
.switch-icon:before {
content: "\e8c8";
}
js
Page({
data: {
lAnimate: '',
rAnimate: '',
start: '北京',
end: '深圳'
},
trigger() {
let vm = this;
let option = {
duration: 100, // 动画执行时间
timingFunction: 'ease-in' // 动画执行效果
};
var lanimation = wx.createAnimation(option); // 创建动画
var ranimation = wx.createAnimation(option);
// 起点
lanimation.translateX(100);
lanimation.opacity(0.1).step();
// 终点
ranimation.translateX(-100);
ranimation.opacity(0.1).step();
vm.setData({
lAnimate: lanimation.export(),// 开始执行动画
rAnimate: ranimation.export() // 开始执行动画
})
setTimeout(() => {
// 起点
lanimation.translateX(0);
lanimation.opacity(1).step();
// 终点
ranimation.translateX(0);
ranimation.opacity(1).step();
var temp = vm.data.start;
vm.setData({
lAnimate: lanimation.export(),// 开始执行动画
rAnimate: ranimation.export(),// 开始执行动画
end: temp,
start: vm.data.end
})
}, 100);
}
})
CSS3动画
CSS3动画还是用animation来完成，需要注意的是只需要@-webkit-keyframes,不需要其他的，如@-moz-keyframes，运用会报错
@-webkit-keyframes lanimation
{
from {left:px2rpx(0px);}
to {left:px2rpx(140px);}
}
.start{
animation lanimation 2.5s ease-in infinite
animation-delay 0.6s
}
公告
以后每月5、15、25号更新原创文章，内容不限，喜欢小编的可以点击关注，也可在下方评论留言，你喜欢什么内容，小编根据大家喜欢的内容尝试更新
