微信小程序提供了实现动画的api——animation,这

作者: 前端  发布:2019-11-21

JS 实现抛物线动画

2018/02/28 · JavaScript · 动画

原文出处: henry_chen   

在做小程序的项目中,需要在添加购物车的时候,增加抛物线小球动画。先给大家看下效果图(其实已经是实现后的效果了,顺便给自己公司打广告了哈哈)

图片 1

动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入。

微信小程序提供了实现动画的api——animation,但却不能循环播放,都是一次性的,动完就Over了,下面提供一个用微信小程序的animation来实现循环动画的玩具,抛砖引玉,希望大家能想出更好的方法来实现真正的循环。说是玩具是因为这个循环动画通过js脚本的setInterval来实现的,但’setInterval’在实际运行中会出现越来越严重的延迟,这是由于js的单线程运行模式所决定的(具体可以搜本关资料看),所以动画间隙并不是那么流畅,所以先玩玩吧,让我们来实现让云朵飘……

点击歌曲时,出现播放器,为避免页面切换太生硬,给播放器展开和收起添加动画。

分析

这种不固定起始位置的动画,自然不能用 gif 图,所以只能用原生代码实现

那我们有什么工具来实现动画呢?

  • 小程序提供了 JS API createAnimation 来创建动画
  • CSS transition

工具有了,我们再看一下什么是抛物线。

这里我们只讨论水平抛物线,水平抛物线从数学原理上来说就是【水平匀速、垂直加速的运动】,转换成代码层面就是在动画效果 timingFunction 中,水平动画采用 linear ,垂直动画采用 ease-in

所以我们需要把这个抛物线动画分解成 两个 同时 进行但 不同动画效果 的动画。

wx.createAnimation(object)

截图如下:

动画1:播放器顶部标题部分由上至下滑动,播放器底部由下至上滑动

图片 2

给播放器所在div包裹上transition,并指定name为normal

<transition name="normal">

    <div class="normal-player">

                //.......

               <div class="top></div>

               <div class="bottom></div>

    </div>

</transition>

组件过渡过程中,会有四个CSS类名进行切换,这四个类名与上面transition的name属性有关,比如name="normal",会有如下四个CSS类名:

normal-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立即删除;

normal-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成之后移除;

normal-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立即删除;

normal-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成之后被删除;

图片 3

从上面四个类名可以看出,fade-enter-active和fade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。

&.normal-enter-active, &.normal-leave-active

      transition: all 0.4s

      .top, .bottom

              transition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32)

&.normal-enter, &.normal-leave-to

       opacity: 0

       .top

             transform: translate3d(0, -100px, 0)

       .bottom

           transform: translate3d(0, 100px, 0)

实现

看官方介绍

图片 4

动画2:歌曲图片在由mini-player过渡到normal-player的动画

图片 5

这个动画使用transition的事件函数实现。

<transition name="normal">

         v-on:enter="enter"

         v-on:after-enter="afterEnter"

         v-on:leave="leave"

         v-on:after-leave="afterLeave"

>

methods: {

        //设置过渡进入完成时的组件状态

       enter:function(el, done){

             // ...

            done()

       },

      //设置过渡进入完成之后的组件状态

      afterEnter:function(el){

             // ...

       },

     //设置过渡离开完成时地组件状态

      leave:function(el, done){

              // ...

           done()

      },

      //设置过渡离开完成之后的组件状态

      afterLeave:function(el){

           // ...

      }

}

在enter函数中,设置图片的位移和放大缩小等动画。需要演示图片从左下角mini-player图片的位置位移至中间cdWrapper的位置,并且放大缩小相应的倍数。由于需要中间的动画帧,使用create-keyframe-animation插件

使用_getPosAndScale函数来获取图片位移的x,y和放大缩小比例scale,函数返回{x, y, scale}

在enter函数中,设置animation动画,注册和运行动画:

enter(el, done) {

       let {x, y, scale} = this._getPosAndScale()

       let animation = {

           0: {

                 transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`

            },

           60: {

                transform: 'translate3d(0, 0 ,0) scale(1.1)'

            },

          100: {

               transform: `translate3d(0, 0, 0) scale(1)`

            }

     }

    animations.registerAnimation({

         name: 'move',

         animation,

         presets: {

              duration: 400,

              easing: 'linear'

         }

     })

    animations.runAnimation(this.$refs.cdWrapper, 'move', done)

}

在afterEnter函数中,unregisterAnimation并且清除元素style的animation:

afterEnter() {

      animations.unregisterAnimation('move')

       this.$refs.cdWrapper.style.animation = ''

}

在leave函数中,由于不需要中间帧的动画,可以使用js直接操作元素:

leave(el, done) {

     this.$refs.cdWrapper.style.transition = 'all 0.4s'

     let {x, y, scale} = this._getPosAndScale()

     this.$refs.cdWrapper.style[transform] = `translate3d(${x}px, ${y}px, 0)      scale(${scale})`

      this.$refs.cdWrapper.addEventListener('transitionend', done)

}

同样的,在afterLeave函数中,需要清除动画的样式:

afterLeave() {

     this.$refs.cdWrapper.style.transition = ''

     this.$refs.cdWrapper.style[transform] = ''

}

(一)小程序的实现

JS:

cartAnimation(x, y) { // x y 为手指点击的坐标,即球的起始坐标 let self = this, cartY = app.globalData.winHeight - 50, // 结束位置(购物车图片)纵坐标 cartX = 50, // 结束位置(购物车图片)的横坐标 animationX = flyX(cartX, x), // 创建球的横向动画 animationY = flyY(cartY, y) // 创建球的纵向动画 this.setData({ ballX: x, ballY: y, showBall: true }) setTimeoutES6(100).then(() => { // 100 ms 延时,确保球已经到位并显示 self.setData({ animationX: animationX.export(), animationY: animationY.export(), }) return setTimeoutES6(400) // 400 ms 是球的抛物线动画时长 }).then(() => { // 400 ms 延时后隐藏球 this.setData({ showBall: false, }) }) } function setTimeoutES6(sec) { // Promise 化 setTimeout return new Promise((resolve, reject) => { setTimeout(() => {resolve()}, sec) }) } function flyX(cartX, oriX) { // 水平动画 let animation = wx.createAnimation({ duration: 400, timingFunction: 'linear', }) animation.left(cartX).step() return animation } function flyY(cartY, oriY) { // 垂直动画 let animation = wx.createAnimation({ duration: 400, timingFunction: 'ease-in', }) animation.top(cartY).step() return animation }

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
cartAnimation(x, y) { // x y 为手指点击的坐标,即球的起始坐标
    let self = this,
        cartY = app.globalData.winHeight - 50, // 结束位置(购物车图片)纵坐标
        cartX = 50, // 结束位置(购物车图片)的横坐标
        animationX = flyX(cartX, x), // 创建球的横向动画
        animationY = flyY(cartY, y) // 创建球的纵向动画
    this.setData({
          ballX: x,
          ballY: y,
          showBall: true
    })
    setTimeoutES6(100).then(() => { // 100 ms 延时,确保球已经到位并显示
        self.setData({
            animationX: animationX.export(),
            animationY: animationY.export(),
        })
        return setTimeoutES6(400) // 400 ms 是球的抛物线动画时长
    }).then(() => { // 400 ms 延时后隐藏球
        this.setData({
            showBall: false,
        })
    })
}
 
function setTimeoutES6(sec) { // Promise 化 setTimeout
    return new Promise((resolve, reject) => {
        setTimeout(() => {resolve()}, sec)
    })
}
 
function flyX(cartX, oriX) { // 水平动画
    let animation = wx.createAnimation({
        duration: 400,
        timingFunction: 'linear',
    })
    animation.left(cartX).step()
    return animation
}
 
function flyY(cartY, oriY) { // 垂直动画
    let animation = wx.createAnimation({
        duration: 400,
        timingFunction: 'ease-in',
    })
    animation.top(cartY).step()
    return animation
}

HTML:

<view animation="{{animationY}}" style="position:fixed;top:{{ballY}}px;" hidden="{{!showBall}}"> <view class="ball" animation="{{animationX}}" style="position:fixed;left:{{ballX}}px;"/> </view>

1
2
3
  <view animation="{{animationY}}" style="position:fixed;top:{{ballY}}px;" hidden="{{!showBall}}">
    <view class="ball" animation="{{animationX}}" style="position:fixed;left:{{ballX}}px;"/>
  </view>

1.创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

让云朵飘 实现代码:

translate 优化

据我所知,用 transform: translate() 来实现的动画会比 top & left 性能更优,但实现下来却没那么容易咯。

研究来研究去,发现 translate 的做法比 top & left 的做法多了一步,就是需要将小球的 translate 位移还原(否则 translate 一直有值),才能保证下一次的位移从点击的位置开始

cartAnimation(x, y) { let self = this, cartY = app.globalData.winHeight

  • 50, cartX = 50, animationX = flyX(cartX, x), animationY = flyY(cartY, y) this.setData({ leftNum: x, topNum: y, showBall: true }) setTimeoutES6(100).then(() => { self.setData({ animationDataX: animationX.export(), animationDataY: animationY.export(), }) return setTimeoutES6(400) }).then(() => { this.setData({ showBall: false, animationX: flyX(0, 0, 0).export(), // 还原小球位置,即 translate 恢复默认值 animationY: flyY(0, 0, 0).export(), }) }) } function flyX(cartX,oriX,duration) { let animation = wx.createAnimation({ duration: duration||400, timingFunction: 'linear', }) animation.translateX(cartX-oriX).step() return animation } function flyY(cartY,oriY,duration) { let animation = wx.createAnimation({ duration: duration||400, timingFunction: 'ease-in', }) animation.translateY(cartY-oriY).step() return animation }
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
cartAnimation(x, y) {
    let self = this,
        cartY = app.globalData.winHeight - 50,
        cartX = 50,
        animationX = flyX(cartX, x),
        animationY = flyY(cartY, y)
    this.setData({
        leftNum: x,
        topNum: y,
        showBall: true
    })
    setTimeoutES6(100).then(() => {
        self.setData({
            animationDataX: animationX.export(),
            animationDataY: animationY.export(),
        })
        return setTimeoutES6(400)
    }).then(() => {
        this.setData({
            showBall: false,
            animationX: flyX(0, 0, 0).export(), // 还原小球位置,即 translate 恢复默认值
            animationY: flyY(0, 0, 0).export(),
        })
    })
}
 
function flyX(cartX,oriX,duration) {
    let animation = wx.createAnimation({
        duration: duration||400,
        timingFunction: 'linear',
    })
    animation.translateX(cartX-oriX).step()
    return animation
}
function flyY(cartY,oriY,duration) {
    let animation = wx.createAnimation({
        duration: duration||400,
        timingFunction: 'ease-in',
    })
    animation.translateY(cartY-oriY).step()
    return animation
}

HTML 部分不变

2.调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() 一样的配置参数用于指定当前组动画的属性

index.wxml

(二)H5 的实现

除了小程序之外,前端日常开发更多的当然还是 H5,下面我将用 CSS3 transition 的方法来实现

JavaScript

<!DOCTYPE html> <html lang="en" style="width:100%;height:100%;"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <style> * { padding: 0; margin: 0; } #ball { width:12px; height:12px; background: #5EA345; border-radius: 50%; position: fixed; transition: left 1s linear, top 1s ease-in; } </style> <title>CSS3 水平抛物线动画</title> </head> <body style="width:100%;height:100%;"> <div id="ball"></div> </body> <script> var $ball = document.getElementById('ball'); document.body.onclick = function (evt) { console.log(evt.pageX,evt.pageY) $ball.style.top = evt.pageY+'px'; $ball.style.left = evt.pageX+'px'; $ball.style.transition = 'left 0s, top 0s'; setTimeout(()=>{ $ball.style.top = window.innerHeight+'px'; $ball.style.left = '0px'; $ball.style.transition = 'left 1s linear, top 1s ease-in'; }, 20) } </script> </html>

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
<!DOCTYPE html>
<html lang="en" style="width:100%;height:100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #ball {
            width:12px;
            height:12px;
            background: #5EA345;
            border-radius: 50%;
            position: fixed;
            transition: left 1s linear, top 1s ease-in;
        }
    </style>
    <title>CSS3 水平抛物线动画</title>
</head>
<body style="width:100%;height:100%;">
    <div id="ball"></div>
</body>
<script>
    var $ball = document.getElementById('ball');
    document.body.onclick = function (evt) {
        console.log(evt.pageX,evt.pageY)
        $ball.style.top = evt.pageY+'px';
        $ball.style.left = evt.pageX+'px';
        $ball.style.transition = 'left 0s, top 0s';
        setTimeout(()=>{
            $ball.style.top = window.innerHeight+'px';
            $ball.style.left = '0px';
            $ball.style.transition = 'left 1s linear, top 1s ease-in';
        }, 20)
    }
</script>
</html>

还有体验链接哦,点我

至此,水平抛物线动画的实现就介绍得差不多啦,嘻嘻!!

1 赞 3 收藏 评论

图片 6

这还是比较好理解的比如第一条对应代码animation: this.animation.export()
第二条比如缩放动画,也就说是一组scale,scaleX, scaleY…为一缩放动画组的一个动画方法,缩放动画组和旋转动画组通过step()链接,按顺序执行。代码中体验吧!看效果反过来看会更容易理解

图片 7

主要属性:

index.js

图片 8

onReady: function () {

这里主要树下timingFunction和transformOrigin

// 页面渲染完成

timingFunction 设置动画效果

// 实例化一个动画

  1. linear 默认为linear 动画一直较为均匀
  2. ease 开始时缓慢中间加速到快结束时减速
  3. ease-in 开始的时候缓慢
  4. ease-in-out 开始和结束时减速
  5. ease-out 结束时减速
  6. step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
  7. step-end 保持 0% 的样式直到动画持续时间结束 一闪而过

var that = this;

transformOrigin 设置动画的基点 默认%50 %50 0

var i = 0

left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%

var ii = 0

top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%

var animationData = wx.createAnimation({

动画组及动画方法

duration: 1000, // 默认为400 动画持续时间,单位ms

样式:

timingFunction: 'ease-in-out',

图片 9

//transformOrigin: '4px 91px'

旋转:

});

图片 10

var animationCloudData = wx.createAnimation({

缩放:

duration: 1000, // 默认为400 动画持续时间,单位ms

图片 11

timingFunction: 'ease-in-out',

偏移:

//transformOrigin: '4px 91px'

图片 12

});

倾斜:

// 顺序执行,当已经执行完上面的代码就会开启定时器

图片 13

// 循环执行代码

矩阵变形:

//dotAnFun = setInterval(function ;

图片 14

/*setInterval(function () {

演示单个动画组效果

// 动画脚本定义

图片 15

//animationData.rotate).step()

wxml

//animationData.scale.rotate.step().scale.step();

<view class="container">
 <view animation="{{animation}}" class="view">我在做动画</view>
</view>
<button type="primary" bindtap="rotate">旋转</button>

animationData.translateY.step({ duration: 500 }).translateY.step({ duration: 500 });

js

// 更新数据

Page({
 data:{
  text:"Page animation",
  animation: ''
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
  // 页面渲染完成
  //实例化一个动画
  this.animation = wx.createAnimation({
   // 动画持续时间,单位ms,默认值 400
   duration: 1000, 
   /**
    * http://cubic-bezier.com/#0,0,.58,1 
    * linear 动画一直较为均匀
    * ease  从匀速到加速在到匀速
    * ease-in 缓慢到匀速
    * ease-in-out 从缓慢到匀速再到缓慢
    * 
    * http://www.tuicool.com/articles/neqMVr
    * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
    * step-end  保持 0% 的样式直到动画持续时间结束    一闪而过
    */
   timingFunction: 'linear',
   // 延迟多长时间开始
   delay: 100,
   /**
    * 以什么为基点做动画 效果自己演示
    * left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%
    * top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100%
    */
   transformOrigin: 'left top 0',
   success: function(res) {
    console.log(res)
   }
  })
 },

 /**
  * 旋转
  */
 rotate: function() {
  //顺时针旋转10度
  //
  this.animation.rotate(150).step()
  this.setData({
   //输出动画
   animation: this.animation.export()
  })
 },

 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 }
})

that.setData({

演示多个动画组效果

// 导出动画示例

图片 16

animationData: animationData.export(),

这里我们只需要更改以下代码即可

//animationCloudData: animationCloudData.export(),

  /**
   * 旋转
   */
  rotate: function() {
    //两个动画组 一定要以step()结尾
    /**
     * 动画顺序 顺时针旋转150度>x,y 放大二倍>x,y平移10px>x,y顺时针倾斜>改变样式和设置宽度宽度
     */
    this.animation.rotate(150).step().scale(2).step().translate(10).step().skew(10).step().opacity(0.5).width(10).step({ducation: 8000})
    this.setData({
      //输出动画
      animation: this.animation.export()
    })
  }

})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

++i;

您可能感兴趣的文章:

  • 微信小程序开发animation心跳动画效果
  • 微信小程序开发之animation循环动画实现的让云朵飘效果
  • 微信小程序 连续旋转动画(this.animation.rotate)详解
  • 微信小程序 小程序制作及动画(animation样式)详解
  • 微信小程序实现animation动画

console.log;

}.bind, 2000);//循环时间 这里1000是1秒

*/

//动画的脚本定义必须每次都重新生成,不能放在循环外

animationCloudData.translateX.step({ duration: 5000 }).translateX.step({ duration: 5000 });

// 更新数据

that.setData({

// 导出动画示例

//animationData: animationData.export(),

animationCloudData: animationCloudData.export(),

})

setInterval(function () {

//动画的脚本定义必须每次都重新生成,不能放在循环外

animationCloudData.translateX.step({ duration: 5000 }).translateX.step({ duration: 5000 });

// 更新数据

that.setData({

// 导出动画示例

//animationData: animationData.export(),

animationCloudData: animationCloudData.export(),

})

++ii;

console.log;

}.bind,10000);//3000这里的设置如果小于动画step的持续时间的话会导致执行一半后出错

}

index.wxss

.clouds{

margin-top:320rpx;

}

.yun1{

width:320rpx;

height:120rpx;

}

附:参考备用:

/*

var that = this;

// 页面渲染完成

//实例化一个动画

var animation = wx.createAnimation({

duration: 1000,

timingFunction: 'ease',

})

this.animation = animation

animation.scale.rotate.step().scale.step();

//导出动画

this.setData({

animationData: animation.export()

})

var i = 0;

// 顺序执行,当已经执行完上面的代码就会开启定时器

/*setTimeout(function () {

that.setData({

animationData: animation.export()

});

i++;

console.log;

}, 1000);*/

/*setInterval(function () {

//循环执行代码

that.setData({

animationData: animation.export()

});

i++;

console.log;

}, 1000) //循环时间 这里是1秒

}*/

本文由9159.com发布于前端,转载请注明出处:微信小程序提供了实现动画的api——animation,这

关键词: