小程序頁面設計動畫的方法：
1、利用樣式實現小程序動畫
在對應的wxml文件添加以下代碼：
<image class="aniamtion" src="../../images/page4.jfif" style="width:200rpx;height:200rpx; position:relative;"></image>
在對應的wxss文件添加以下代碼：
.aniamtion {
animation: mymove 5s infinite;
/* //infinite屬性是表示無限循環的意思，沒有這個屬性的話動畫只執行一次。 */
}
@keyframes mymove {
from {
/* left: 0px; */
/* transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx); */
transform: rotate3d(100,200,300,0deg);
}
to {
/* left: 200px; */
/* transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx); */
transform: rotate3d(200,300,400,360deg);
}
}
2、用小程序的API來實現動畫
在對應的wxml文件添加以下代碼：
<view class="container">
<view animation="{{animation}}" class="view">
將做動畫的塊
</view>
</view>
<button type="default" size="mini" bindtap="rotate">
旋轉
</button>
在對應的js文件添加以下代碼：
Page({
data: {
animation:''
},
onReady: function () {
this.animation = wx.createAnimation({
duration:1000,
timingFunction:'linear',
delay:100,
transformOrigin:"left top 0"
})
},
rotate(){
this.animation.rotate(150).step().translate(100).step()
this.setData({
animation:this.animation.export()
})
}
})
3、用選擇器來綁定組件來來實現組件的動畫，代碼：
<text>pages/index7/index7.wxml</text>
<view id="container" style="height: 100px; width: 100px; background-color: blue;">
container
</view>
<view class="block" style="height: 100px; width: 100px;background-color: #ccc;">
block
</view>
用選擇器選擇相應的組件進行相應的動畫，進行關鍵幀的處理，代碼：
onLoad: function () {
this.animate('#container', [
{ opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
{ opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },
{ opacity: 1.0, rotate: 90, backgroundColor: '#FF0000' },
], 5000)
this.animate('.block', [
{ scale: [1, 1], rotate: 0, ease: 'ease-out' },
{ scale: [1.5, 1.5], rotate: 45, ease: 'ease-in'},
{ scale: [2, 2], rotate: 90 },
], 5000)
},
}
4、用第三方的庫 animation.css。
從https://daneden.github.io/animate.css/下載css動畫文件
把.css文件改名成.wxss文件
把它引入到你的app.wxss文件中
@import “動畫文件的相對目錄”
在用的時候把他和你的樣式綁定，代碼如下：
<view class="swing" style="height: 100px; width: 100px;background-color: #ccc;">
block
</view>
// 給類名為swing 的文件綁定swing 的動畫
.swing{
animation: swing 5s infinite;
}
