這幾天在做小程序時(shí)遇到了一些問題：想要實(shí)現(xiàn)一個(gè)答對題目+5秒、答錯(cuò)題目-5秒的提示動(dòng)畫效果，但是關(guān)于微信小程序的animation自定義動(dòng)畫自己沒有系統(tǒng)的學(xué)習(xí)過

做動(dòng)畫需要我們將一個(gè)復(fù)雜的動(dòng)作過程，拆解為一步一步的小節(jié)過程

微信中已經(jīng)為我們寫好了端口我們只需要實(shí)例化一個(gè)動(dòng)畫實(shí)例（實(shí)例代碼如下）

先了解基礎(chǔ)部分：

在看代碼之前要先有個(gè)下面的基礎(chǔ)了解

1）wx.createAnimation(object) 微信小程序?qū)嵗粋€(gè)動(dòng)畫效果

2）export( ) 這個(gè)方法是導(dǎo)出動(dòng)畫數(shù)據(jù)（傳遞給animation屬性）

3）step( )?來表示一組動(dòng)畫完成

?微信官方文檔地址

?微信官網(wǎng)主要屬性設(shè)置：

這里主要說下timingFunction和transformOrigin

• timingFunction 設(shè)置動(dòng)畫效果

  • linear 默認(rèn)為linear 動(dòng)畫一直較為均勻
  • ease 開始時(shí)緩慢中間加速到快結(jié)束時(shí)減速
  • ease-in 開始的時(shí)候緩慢
  • ease-in-out 開始和結(jié)束時(shí)減速
  • ease-out 結(jié)束時(shí)減速
  • step-start 動(dòng)畫一開始就跳到 100% 直到動(dòng)畫持續(xù)時(shí)間結(jié)束 一閃而過
  • step-end 保持 0% 的樣式直到動(dòng)畫持續(xù)時(shí)間結(jié)束 一閃而過

• transformOrigin 設(shè)置動(dòng)畫的基點(diǎn) 默認(rèn)50% 50% 0

  • left,center right是水平方向取值，對應(yīng)的百分值為left=0%;center=50%;right=100%
  • top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%

動(dòng)畫組及動(dòng)畫方法：

樣式：?

?旋轉(zhuǎn)：

?縮放：

偏移：

傾斜：

矩形變形：

官方是這樣介紹的：

創(chuàng)建一個(gè)動(dòng)畫實(shí)例?animation。調(diào)用實(shí)例的方法來描述動(dòng)畫。最后通過動(dòng)畫實(shí)例的 export 方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的 animation 屬性。

使用步驟：

　　1）創(chuàng)建一個(gè)animation實(shí)例

　　2) 調(diào)用實(shí)例化的方法描述動(dòng)畫

　　3）最后通過動(dòng)畫實(shí)例的export( )方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給{{animation}}

?調(diào)用動(dòng)畫操作方法后要調(diào)用 step( ) 來表示一組動(dòng)畫完成，可以在一組動(dòng)畫中調(diào)用任意多個(gè)動(dòng)畫方法，一組動(dòng)畫中的所有動(dòng)畫會(huì)同時(shí)開始，一組動(dòng)畫完成后才會(huì)進(jìn)行下一組動(dòng)畫。step 可以傳入一個(gè)跟 wx.createAnimation() 一樣的配置參數(shù)用于指定當(dāng)前組動(dòng)畫的屬性

下面是代碼實(shí)例：

?????????HTML

<view class="header-text {{currentTopicIsCorrect != 0 ? currentTopicIsCorrect == 1 ? 'header-text-yes' : 'header-text-no' : ''}}" animation="{{animationData}}">{{currentTopicIsCorrect == 1 ?'+5' : '-5'}}</view>

JS　　

Page({/*** 頁面的初始數(shù)據(jù)*/data: {currentTopicIsCorrect: 0, //當(dāng)前題是否答對animationData: null, //},//動(dòng)畫效果--淡入淡出ani_smallbigOut: function (correct) {let that = this//實(shí)例化一個(gè)animationvar animation = wx.createAnimation({duration: 450,// 動(dòng)畫持續(xù)時(shí)間，單位ms，默認(rèn)值 400/** * linear 動(dòng)畫一直較為均勻* ease 從勻速到加速在到勻速* ease-in 緩慢到勻速* ease-in-out 從緩慢到勻速再到緩慢* step-start 動(dòng)畫一開始就跳到 100% 直到動(dòng)畫持續(xù)時(shí)間結(jié)束 一閃而過* step-end 保持 0% 的樣式直到動(dòng)畫持續(xù)時(shí)間結(jié)束 一閃而過*/timingFunction: 'ease',})this.animation = animationanimation.scale(3, 3).opacity(1).step()animation.scale(0).step()that.setData({animationData: animation.export(),})that.setData({currentTopicIsCorrect: 0,})setTimeout(function () {that.setData({flag: false,})}, 1500)},/*** 生命周期函數(shù)--監(jiān)聽頁面加載*/onLoad(options) {this.ani_smallbigOut(1)},})

?wxss

.header-text {margin-top: 12%;margin-left: 2%;opacity: 0; }.header-text-yes {color: green; }.header-text-no {color: red; }

總結(jié)

以上是生活随笔為你收集整理的微信小程序animation有趣的自定义动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。