小程序頁(yè)面怎么設(shè)計(jì)動(dòng)畫(huà)

小程序頁(yè)面設(shè)計(jì)動(dòng)畫(huà)的方法：

1、利用樣式實(shí)現(xiàn)小程序動(dòng)畫(huà)

在對(duì)應(yīng)的wxml文件添加以下代碼：

<image class="aniamtion" src="../../images/page4.jfif" style="width:200rpx;height:200rpx; position:relative;"></image>

在對(duì)應(yīng)的wxss文件添加以下代碼：

.aniamtion {
  animation: mymove 5s infinite;
  /* //infinite屬性是表示無(wú)限循環(huán)的意思，沒(méi)有這個(gè)屬性的話(huà)動(dòng)畫(huà)只執(zhí)行一次。 */
}
@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來(lái)實(shí)現(xiàn)動(dòng)畫(huà)

在對(duì)應(yīng)的wxml文件添加以下代碼：

<view class="container">
<view animation="{{animation}}" class="view">
將做動(dòng)畫(huà)的塊
</view>
</view>
<button type="default" size="mini" bindtap="rotate">
旋轉(zhuǎn)
</button>

在對(duì)應(yīng)的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、用選擇器來(lái)綁定組件來(lái)來(lái)實(shí)現(xiàn)組件的動(dòng)畫(huà)，代碼：

<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>

用選擇器選擇相應(yīng)的組件進(jìn)行相應(yīng)的動(dòng)畫(huà)，進(jìn)行關(guān)鍵幀的處理，代碼：

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、用第三方的庫(kù) animation.css。

從https://daneden.github.io/animate.css/下載css動(dòng)畫(huà)文件

把.css文件改名成.wxss文件

把它引入到你的app.wxss文件中

@import “動(dòng)畫(huà)文件的相對(duì)目錄”

在用的時(shí)候把他和你的樣式綁定，代碼如下：

<view class="swing" style="height: 100px; width: 100px;background-color: #ccc;">
block
</view>
// 給類(lèi)名為swing 的文件綁定swing 的動(dòng)畫(huà)
.swing{
animation: swing 5s infinite;
}