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

JS動畫

利用小程序API提供的wx.createAnimation(OBJECT)實現，API中是這樣說：創(chuàng)建一個動畫實例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, // 動畫執(zhí)行時間

timingFunction: 'ease-in' // 動畫執(zhí)行效果

};

var lanimation = wx.createAnimation(option); // 創(chuàng)建動畫

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(),// 開始執(zhí)行動畫

rAnimate: ranimation.export() // 開始執(zhí)行動畫

})

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(),// 開始執(zhí)行動畫

rAnimate: ranimation.export(),// 開始執(zhí)行動畫

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號更新原創(chuàng)文章，內容不限，喜歡小編的可以點擊關注，也可在下方評論留言，你喜歡什么內容，小編根據大家喜歡的內容嘗試更新

總結

以上是生活随笔為你收集整理的css卷轴动画小程序,微信小程序动画两种实现方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。