本文目錄一覽：
小程序設置動畫效果
小程序和html頁面有點不同，主要是使用js來實現動畫效果，因為小程序自身有提供一種方式：wx.createAnimation(OBJECT)，它創建一個動畫實例 animation ，通過調用實例的方法來描述動畫。最後通過動畫實例的export方法導齣動畫數據傳遞給組件的animation屬性，step()來停止動畫，step() 表示一組動畫完成。
我們主要用wx:createAnimation({})來設置一些參數，例如持續時間、延時、載入方式等，用export()來開啟動畫，在頁面上調用animation=」{{動畫名稱}}」。具體步驟：
1）創建動畫對象並設置有效參數==wx:createAnimation({參數：有效值})
2）創建一組動畫，調用step()來表示一組動畫的完成==動畫對象.動畫效果.step()
3）在data中設置一個對象vip_animal(自己隨意命名)，用該對象開啟動畫==this.setData({vip_animal: animation.export()})
4）在頁面上調用動畫對象== animation=”{{vip_animal}}”
例子：淡入淡齣動畫效果（當淡入動畫生效後1.5s，淡齣動畫開始生效）
在wxml上調用animation=”{{vip_animal}}”來顯示
如果需要設置循環效果。我們可以設置：（setAnimation為）
另一種方式：
在wxml上調用style=”{{style_img}}”來顯示
小程序如何使用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({
duration: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({
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、用選擇器來綁定組件來來實現組件的動畫（小程序2.9.0 的庫可用，版本不夠會報this.animate不是一個方法）
textpages/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
需要做的有
從下載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;
}
微信小程序之自定義模態彈窗（帶動畫）實例
首先看看官方提供的模態彈窗
api如下：
示例：
這樣的模態彈窗，充其量只能做個alert，提示一下信息。
但是並不能使用它來處理複雜性的彈窗業務，因此寫了Michael從新自定義了一個，採用了仿原生的樣式寫法
wxml****：
wxss：
js:
相關連接：
————————————————————
微信開發者工具的快捷鍵
微信小程序的文件結構 —— 微信小程序教程系列（1）
微信小程序的生命周期實例演示 —— 微信小程序教程系列（2）
微信小程序的動態修改視圖層的數據 —— 微信小程序教程系列（3）
微信小程序的新建頁面 —— 微信小程序教程系列（4）
微信小程序的如何使用全局屬性 —— 微信小程序教程系列（5）
微信小程序的頁面跳轉 —— 微信小程序教程系列（6）
微信小程序標題欄和導航欄的設置 —— 微信小程序教程系列（7）
微信小程序的作用域和模塊化 —— 微信小程序教程系列（8）
微信小程序視圖層的數據綁定 —— 微信小程序教程系列（9）
微信小程序視圖層的條件渲染 —— 微信小程序教程系列（10）
微信小程序視圖層的列表渲染 —— 微信小程序教程系列（11）
微信小程序視圖層的模板 —— 微信小程序教程系列（12）
微信小程序之wxss —— 微信小程序教程系列（13）
微信小程序的網路請求 —— 微信小程序教程系列（14）
微信小程序的百度地圖獲取地理位置 —— 微信小程序教程系列（15）
微信小程序使用百度api獲取天氣信息 —— 微信小程序教程系列（16）
微信小程序獲取系統日期和時間 —— 微信小程序教程系列（17）
微信小程序之上拉載入和下拉刷新 —— 微信小程序教程系列（18）
微信小程序之組件 —— 微信小程序教程系列（19）
微信小程序之微信登陸 —— 微信小程序教程系列（20）
————————————————————
微信小程序之頂部導航欄實例 —— 微信小程序實戰系列（1）
微信小程序之上拉載入（分頁載入）實例 —— 微信小程序實戰系列（2）
微信小程序之輪播圖實例 —— 微信小程序實戰系列（3）
微信小程序之仿android fragment之可滑動的底部導航欄實例 —— 微信小程序實戰系列（4）
微信小程序之登錄頁實例 —— 微信小程序實戰系列（5）
微信小程序之自定義toast實例 —— 微信小程序實戰系列（6）
微信小程序之自定義抽屜菜單（從下拉出）實例 —— 微信小程序實戰系列（7）
微信小程序之自定義模態彈窗（帶動畫）實例 —— 微信小程序實戰系列（8）
————————————————————
微信小程序之側欄分類 —— 微信小程序實戰商城系列（1）
微信小程序之仿淘寶分類入口 —— 微信小程序實戰商城系列（2）
微信小程序之購物數量加減 —— 微信小程序實戰商城系列（3）
微信小程序之商品屬性分類 —— 微信小程序實戰商城系列（4）
微信小程序之購物車 —— 微信小程序實戰商城系列（5）
未完待續。。。
更多小程序的教程：
謝謝觀看，不足之處，敬請指導
原創文章，作者：ECJP，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/140570.html
微信掃一掃 
支付寶掃一掃 