wx小程序:wx.createAnimation的使用

wx小程序如何使用动画: wx.createAnimation的使

这里是wx小程序开发文档关于动画的属性里面有很多的方法以及一些属性的使用:
https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html
先给大家看一下效果:(左边电影的剧情没有展开,右边的剧情展开)
当我点击﹀时电影剧情就会展开图标也会跟着翻转;点击︿时,剧情就会收起,图标也会翻转

话不多说先上一下代码,在来说一下实现的原理:

wxml:代码
<view class="films-info">
      <view class="title">{{film.name}}</view>
      <view class="score" wx:if="{{film.grade}}">{{film.grade}}分</view>
      <view class="score" wx:else>暂无评分</view>
      <view class="genrs">{{film.category}}</view>
      <view class="premiereAt">{{utils.formatDate(film.premiereAt)}}上映</view>
      <view class="nation">{{film.nation}} | {{film.runtime}}分钟</view>
      <view clas></view>
      <view class="synopsis text" animation="{{animatheightadd}}">{{film.synopsis}}</view> //这里是电影剧情的展开与收起
      <view class="text test">{{film.synopsis}}</view>   //这里有两个剧情??????为什么会有两个:下面我会给大家讲解?
    <view class="toggle">
      <view class="img-box1"
       bindtap="synopsis" 
       animation="{{animationData}}"  //这里是定义的动画属性,图标的翻转
      >
        <image src="../../images/icons/shang.png" ></image>
      </view>
    </view>
    </view>
    <view class="kong"></view>
    
    <view class="all-casts">
      <view class="actors-title">演职人员: </view>
      <scroll-view scroll-x style="white-space:nowrap">
        <view wx:for="{{film.actors}}" wx:key="name" style="display:inline-block">
          <image style="width:170rpx;height:170rpx" src="{{item.avatarAddress}}"></image>
          <view class="actors-name">{{item.name}}</view>
          <view class="actors-role">{{item.role}}</view>
        </view>
      </scroll-view>
    </view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

为什么会有两个电影剧情:是因为我要让剧情的高度自适应,因为每个电影的剧情文字长度都不一样,那么展开的高度也就不一样所以我们不能给定高,没有定义动画的剧情我隐藏掉了,那么他的作用主要用于我作为电影剧情展开的高度依据,那么肯定就要获隐藏剧情的高度,下面就是js的代码:

  data: {    //这是页面的初始化数据
    film: null, //这是电影的数据,要通过请求得到
    height: '', 电影剧情的高度,被隐藏掉的剧情高度,下面有获取的方法
    animationData: "",图标旋转的动画
    animatheightadd: "",//剧情展开收起的动画
    isdown:false  //判断剧情是展开还是收起
  },

wx.createSelectorQuery().select(".test").boundingClientRect(function (rect) {
        console.log(rect.height)   //这是获取隐藏的电影剧情的高度,也是wx小程序开发文档里面的方法  **select(".test")**里面传入获取高度对象的选择器
        this.setData({
          height: rect.height * 2 + "rpx"     //这里*2是因为获取过来是px的高度,转成rpx,为了适应设备
        })
        console.log(that.data.height)
      }).exec()
   
  //这里就是封装动画的函数:
  //1.创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
//2.调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完
//成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的属性
  synopsis() {
  var that=this
  //首先创建动画实例:通过 wx.createAnimation 创建
 var animation = wx.createAnimation({  //这里是图标翻转的动画实例
      duration: 500, //动画的时长
      timingFunction: "ease", //动画的效果      
      delay: 0,//延迟执行的时间
      transformOrigin: "50% 50%",//动画运行的基点坐标
    })
    var animatheightadd = wx.createAnimation({  //这里是剧情展开和收起的动画实例
      duration: 500,
      timingFunction: 'ease-in',
    })
    if(!that.data.isdown){//判断是展开的还是收起
    animation.rotate(180).step();  //动画的方法,有很多具体看文档我就不解释了,这里是旋转
    animatheightadd.height(that.data.height).step()    //step() 来表示一组动画完成,这个一定要加 ,that.data.height==就是我们要展开的高度
    that.setData({
      isdown:true,
      animationData: animation.export(),  //通过 animation.export()导出动画,我们才能调用,这个也很关键
      animatheightadd: animatheightadd.export(),
    })
    }else{
      animation.rotate(0).step();
      animatheightadd.height("72rpx").step()  //这里的72rpx是我定义动画的剧情的高度给的定高
      that.setData({
        isdown: false,
        animationData: animation.export(),
        animatheightadd: animatheightadd.export(),
      })
    }
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

这里的动画我只用了两个:animation.rotate(180).step(); animatheightadd.height(“72rpx”).step()更多的需要大家去看一下wx小程序的开发文档.希望对大家有帮助.逆战一起加油!!!