開發小程序，實現動畫功能，有兩種實現方式，下面來看看具體怎麼做：

JS動畫

利用小程序API提供的wx.createAnimation(OBJECT)實現，API中是這樣說：創建一個動畫實例animation。調用實例的方法來描述動畫。最後通過動畫實例的export方法導出動畫數據傳遞給組件的animation屬性。

wxml

 
 {{start}}
 
 
  
 {{end}}
 

css

@font-face {
 font-family: 'iconfont'; /* project id 703892 */
 src: url('//at.alicdn.com/t/font_703892_u8zob8nchpf.eot');
 src: url('//at.alicdn.com/t/font_703892_u8zob8nchpf.eot?#iefix') format('embedded-opentype'),
 url('//at.alicdn.com/t/font_703892_u8zob8nchpf.woff') format('woff'), 

 url('//at.alicdn.com/t/font_703892_u8zob8nchpf.ttf') format('truetype'),
 url('//at.alicdn.com/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
}
 

上面有一部分代碼涉及的“阿里巴巴矢量圖標庫”，關注我，後面提供使用方法哦。