播放器张开收起动画,让云朵飘

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)

截图如下:

卡通一:播放器顶部标题部分由上至下滑动,播放器后面部分由下至上海滑稽剧团动

亚洲必赢官网 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:进入过渡的发端意况,成分被插入时生效,只行使1帧后马上删除;

normal-enter-active:进入过渡的终结状态,成分被插入时就见效,在联网进度一气呵成之后移除;

normal-leave:离开过渡的发端情状,成分被删除时接触,只使用1帧后及时删除;

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

动画二:歌曲图片在由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)

}

如出1辙的,在afterLeave函数中,须求消除动画的样式:

afterLeave() {

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

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

}

(1)小程序的落到实处

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 })
setTimeoutES陆(十0).then(() => { // 十0 ms 延时,确认保证球已经成功并出示
self.setData({ animationX: animationX.export(), animationY:
animationY.export(), }) return setTimeoutES陆(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>

一.成立2个卡通实例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 })
    setTimeoutES陆(⑩0).then(() => { self.setData({ animationDataX:
    animationX.export(), animationDataY: animationY.export(), }) return
    set提姆eoutES6(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()
来代表1组动画完毕,能够在1组动画中调用自便八个卡通方法,1组动画中的全数动画会同时启幕,一组动画达成后才会进行下壹组动画。step
能够流传2个跟 wx.createAnimation()
一样的配置参数用于钦点当前组动画的性质

index.wxml

(二)H5 的实现

除开小程序之外,前端日常花费更加多的当然依然 H伍,下边笔者将用 CSS3transition 的艺术来兑现

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: #五EA34伍;
border-radius: 2/④; position: fixed; transition: left 一s linear, top 一s
ease-in; } </style> <title>CSS3 水平抛物线动画</title>
</head> <body style=”width:百分之百;height:百分之百;”> <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 一s linear, top
壹s 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…为1缩放动画组的1个动画方法,缩放动画组和旋转动画组通过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 动画一发端就跳到 百分百 直到动画持续时间结束 一闪而过
  7. step-end 保持 0% 的体制直到动画持续时间结束 一闪而过

var that = this;

transformOrigin 设置动画的主导 私下认可%50 %50 0

var i = 0

left,center
right是程度方向取值,对应的百分值为left=0%;center=2/四;right=百分之百

var ii = 0

top center bottom是笔直方向的取值,个中top=0%;center=二分一;bottom=百分百

var animationData = wx.createAnimation({

卡通组及动画方法

duration: 一千, // 默以为400 动画持续时间,单位ms

样式:

timingFunction: ‘ease-in-out’,

亚洲必赢官网 9

//transformOrigin: ‘4px 91px’

旋转:

});

亚洲必赢官网 10

var animationCloudData = wx.createAnimation({

缩放:

duration: 一千, // 默以为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, 三千);//循环时间 那里一千是一秒

*/

//动画的台本定义必须每趟都再次生成,不能够放在循环外

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);//贰仟这里的装置要是低于动画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;

}, 一千) //循环时间 那里是1秒

}*/

网站地图xml地图