❶ CSS3@keyframes規則和animation動畫
CSS3中新增了動畫相關的屬性，其中@keyframes規則用於設置創建動畫，其原理其實就是將一套css樣式逐漸變成另外一套css樣式，在@keyframes中可以使用百分比表示動畫進度對應的樣式，0% 是動畫的開始樣式，100% 動畫的結束樣式，每個樣式可以稱為"關鍵幀樣式"，每個動畫可以包含很多幀，每一幀可以設置一個或多個樣式。語法格式: @keyframes 動畫名:{0%:{css樣式} ... 100%:{css樣式}} ，其中關鍵幀合法值是0-100%，from與 0% 相同，to與 100% 相同
使用@keyframes定義了動畫，那如何使用呢？
那就得在對應要使用該動畫的元素上添加animation屬性
animation是一個復合屬性，是所有動畫屬性的縮寫，除animation-play-state
1. animation-name 動畫名，表示要應用哪個動畫
2. animation-ration 動畫完成一個周期所花費的時間（秒或毫秒數），默認0
3. animation-timing-function 表示動畫速度曲線，常用關鍵字linear、ease、ease-in、ease-out、ease-in-out，默認是ease。還可以使用cubic-bezier(n,n,n,n)設置
4. animation-delay 動畫延遲時間，默認0
5. animation-iteration-count 動畫播放次數，默認1 只播一次
6. animation-direction 設置動畫在下個播放周期是否逆轉方向，默認是 "normal"正常播放，alternate輪流反向播放
7. animation-fill-mode 用於設置動畫填充模式，none 不改變默認行為；forwards當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）；backwards在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）；both向前和向後填充模式都被應用
8. animation-play-state 設置動畫播放狀態，paused動畫已暫停，running是默認值，表示動畫正在運行播放
❷ 小程序如何使用css3動畫
1、利用樣式實現小程序動畫(用法和css用法相識)
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來實現動畫
用wx.createAnimation(object) 來創建一個動畫 -->返回一個animation對象
創建一個動畫實例 animation。
onReady: function () {
this.animation = wx.createAnimation({
ration:1000,
timingFunction:'linear',
delay:100,
transformOrigin:"left top 0"
})
},
調用實例的方法來描述動畫。
Animation.step() 表示一組動畫的完成，可以在一組動畫中調用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成後才會進行下一組動畫
rotate(){
this.animation.rotate(150).step() //對動畫進行簡單的描述
this.setData({
animation:this.animation.export()
})
},
最後通過動畫實例的 export 方法導出動畫數據傳遞給組件的 animation 屬性。
this.animation.export() 導出動畫隊列。export 方法每次調用後會清掉之前的動畫操作
rotate(){
this.animation.rotate(150).step() //對動畫進行簡單的描述
this.setData({ // 在setData({}) 導出動畫數據數據給組件
animation:this.animation.export()
})
},
完整的wxml
<view class="container">
<view animation="{{animation}}" class="view">
將做動畫的塊
</view>
</view>
<button type="default" size="mini" bindtap="rotate">
旋轉
</button>
完整的wxjs
Page({
data: {
animation:''
},
onReady: function () {
this.animation = wx.createAnimation({
ration: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、用選擇器來綁定組件來來實現組件的動畫（小程序2.9.0 的庫可用，版本不夠會報this.animate不是一個方法）
<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;
}