登录/注册

首页 小程序资讯 如何实现小程序动画?小程序动画的实现方法

如何实现小程序动画?小程序动画的实现方法

撸串青年

2018/11/11 10:53

134

程序,动画,如何实现,方法

本篇文章给大家带来的内容是介绍如何实现小程序动画?小程序动画的实现方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

在普通的网页开发中,动画效果可以通过css3来实现大部分需求,在小程序开发中同样可以使用css3,同时也可以通过api方式来实现。

API解读

小程序中,通过调用api来创建动画,需要先创建一个实例对象。这个对象通过wx.createAnimation返回,animation的一系列属性都基于这个实例对象。

创建这个对象

    let animation = wx.createAnimation({
        duration: 2000,
        delay: 0,
        timingFunction: "linear",
    });

这个animation就是通过wx.createAnimation之后返回的实例。在创建过程中,可以给这个实例添加一些属性,如以上代码所示,等同于css3animation:$name 2s linear的写法。

添加动效

实例创建完成之后,基于该实例,添加需要的动态效果,动态类型可以查阅文档得知,以最常见的移动,旋转为例:

    animation.translate($width, 0).rotate($deg);

结束动画

.step()表示一组动画的结束

    animation.step();

导出动画

动画效果添加完成了,如何给想要的dom添加动效呢。这里需要用到.export()导出动画队列,赋值给某个dom对象。

    this.setData({ moveOne: animation.export() })
    <view  animation="{{moveOne}}"></view>

例子

以下将通过2组动画,来对比一下css3api实现方式的不同。

一、模块移动动画

动画效果:

下图有两组动画,分别为api方式(上)与css3方式(下)完成的效果,点击move按钮,动画启动。

如何实现小程序动画?小程序动画的实现方法

代码实现

以下分别为css3api的核心代码:

css3:

    <!-- wxml -->
    <view class='border'>
        <view class='css-block {{isMove && "one"}}'></view>
        <view class='css-block {{isMove && "two"}}'></view>
        <view class='css-block {{isMove && "three"}}'></view>
        <view class='css-block {{isMove && "four"}}'></view>
    </view>
    // scss
    @mixin movePublic($oldLeft,$oldTop,$left,$top) {
        from {
          transform:translate($oldLeft,$oldTop);
        }
        to {
          transform:translate($left,$top);
        }
    }
    
    @mixin blockStyle($color,$name) {
        background: $color;
        animation:$name 2s linear infinite alternate;
    }
    .one {
        @include blockStyle(lightsalmon,onemove);
    }
    
    @keyframes onemove {
        @include movePublic(50rpx,-25rpx,-150rpx,0rpx);
    }
    
    .two {
        @include blockStyle(lightblue,twomove);
    }
    
    @keyframes twomove {
        @include movePublic(0rpx,25rpx,-50rpx,0rpx);
    }
    
    .three {
        @include blockStyle(lightgray,threemove);
    }
    
    @keyframes threemove {
        @include movePublic(0rpx,25rpx,50rpx,0rpx);
    }
    
    .four {
        @include blockStyle(grey,fourmove);
    }
    
    @keyframes fourmove {
        @include movePublic(-50rpx,-25rpx,150rpx,0rpx);
    }
    // js
    moveFunction(){
        this.setData({
            isMove: true
        })
    }

css3中通过动态改变class类名来达到动画的效果,如上代码通过onetwothreefour来分别控制移动的距离,通过sass可以避免代码过于冗余的问题。(纠结如何在小程序中使用sass的童鞋请看这里哦:wechat-mina-template)

api:

    moveClick(){
        this.move(-75,-12.5,25,'moveOne');
        this.move(-25,12.5, 0,'moveTwo');
        this.move(25, 12.5,0,'moveThree');
        this.move(75, -12.5,-25,'moveFour');
        this.moveFunction(); // 该事件触发css3模块进行移动
    },

    // 模块移动方法
    move: function (w,h,m,ele) {
        let self = this;
        let moveFunc = function () {
        let animation = wx.createAnimation({
            duration: 2000,
            delay: 0,
            timingFunction: "linear",
        });
    
        animation.translate(w, 0).step()
        self.setData({ [ele]: animation.export() })
        let timeout = setTimeout(function () {
            animation.translate(m, h).step();
            self.setData({
                // [ele] 代表需要绑定动画的数组对象
                [ele]: animation.export()
            })
          }.bind(this), 2000)
        }
        moveFunc();
        let interval = setInterval(moveFunc,4000)
    }

效果图可见,模块之间都是简单的移动,可以将他们的运动变化写成一个公共的事件,通过向事件传值,来移动到不同的位置。其中的参数w,h,m,ele分别表示发散水平方向移动的距离、聚拢时垂直方向、水平方向的距离以及需要修改animationData的对象。

通过这种方法产生的动画,无法按照原有轨迹收回,所以在事件之后设置了定时器,定义在执行动画2s之后,执行另一个动画。同时动画只能执行一次,如果需要循环的动效,要在外层包裹一个重复执行的定时器到。

查看源码,发现api方式是通过js插入并改变内联样式来达到动画效果,下面这张动图可以清晰地看出样式变化。

如何实现小程序动画?小程序动画的实现方法

打印出赋值的animationDataanimates中存放了动画事件的类型及参数;options中存放的是此次动画的配置选项,transition中存放的是wx.createAnimation调用时的配置,transformOrigin是默认配置,意为以对象的中心为起点开始执行动画,也可在wx.createAnimation时进行配置。

如何实现小程序动画?小程序动画的实现方法

二、音乐播放动画

上面的模块移动动画不涉及逻辑交互,因此新尝试了一个音乐播放动画,该动画需要实现暂停、继续的效果。

动画效果:

如何实现小程序动画?小程序动画的实现方法

两组不同的动画效果对比,分别为api(上)实现与css3实现(下):

如何实现小程序动画?小程序动画的实现方法

代码实现

以下分别是css3实现与api实现的核心代码:

css3:

    <!-- wxml -->
    <view class='music musicTwo musicRotate {{playTwo ? " ": "musicPaused"}} ' bindtap='playTwo'>
        <text class="iconfont has-music" wx:if="{{playTwo}}"></text>
        <text class="iconfont no-music" wx:if="{{!playTwo}}"></text>
    </view>
    // scss
    .musicRotate{
        animation: rotate 3s linear infinite;
    }
    
    @keyframes rotate{
        from{
            transform: rotate(0deg)
        }
        to{
            transform: rotate(359deg)
        }
    }
    
    .musicPaused{
        animation-play-state: paused;
    }
    // js
    playTwo(){
        this.setData({
            playTwo: !this.data.playTwo
        },()=>{
            let back = this.data.backgroundAudioManager;
            if(this.data.playTwo){
                back.play();
            } else {
                back.pause();
            }
        })
    }

通过playTwo这个属性来判断是否暂停,并控制css类的添加与删除。当为false时,添加.musicPaused类,动画暂停。

api:

    <!-- wxml -->
    <view class='music' bindtap='play'  animation="{{play && musicRotate}}">
        <text class="iconfont has-music" wx:if="{{play}}"></text>
        <text class="iconfont no-music" wx:if="{{!play}}"></text>
    </view>
    // js
    play(){
        this.setData({
            play: !this.data.play
        },()=>{
            let back = this.data.backgroundAudioManager;
            if (!this.data.play) {
                back.pause();
               // 跨事件清除定时器
               clearInterval(this.data.rotateInterval);
            } else {
                back.play();
                // 继续旋转,this.data.i记录了旋转的程度
                this.musicRotate(this.data.i);
            }
        })
    },
    musicRotate(i){
        let self = this;
        let rotateFuc = function(){
            i++;
            self.setData({
                i:i++
            });
            let animation = wx.createAnimation({
                duration: 1000,
                delay: 0,
                timingFunction: "linear",
            });
            animation.rotate(30*(i++)).step()
            self.setData({ musicRotate: animation.export() });
        }
        rotateFuc();
        let rotateInterval = setInterval(
            rotateFuc,1000
        );
        // 全局定时事件
        this.setData({
            rotateInterval: rotateInterval
        })
    }

通过api实现的方式是通过移除animationData来控制动画,同时暂停动画也需要清除定时器,由于清除定时器需要跨事件进行操作,所以定了一个全局方法rotateInterval

api方式定义了旋转的角度,但旋转到该角度之后便会停止,如果需要实现重复旋转效果,需要通过定时器来完成。因此定义了变量i,定时器每执行一次便加1,相当于每1s旋转30°,对animation.rotate()中的度数动态赋值。暂停之后继续动画,需要从原有角度继续旋转,因此变量i需要为全局变量。

代码变化:

下图可以看出,api方式旋转是通过不断累加角度来完成,而非css3中循环执行。

如何实现小程序动画?小程序动画的实现方法

对比

通过上述两个小例子对比,无论是便捷度还是代码量,通过css3来实现动画效果相对来说是更好的选择。api方式存在较多局限性:

  1. 动画只能执行一次,循环效果需要通过定时器完成。

  2. 无法按照原有轨迹返回,需要返回必须定义定时器。

  3. 频繁借助定时器在性能上有硬伤。

综合以上,推荐通过css3来完成动画效果。

以上就是如何实现小程序动画?小程序动画的实现方法的详细内容,更多请关注php中文网其它相关文章!

小程序资讯推荐

百度推“小度扫描”小程序 一秒可转文几万字

12月06日 16:55站长之家(ChinaZ.com) 12月5日 消息:不少人在工作和学习中都需要用到图片文字识别工具,日前百度官方宣布新推出了微信小程序“小度扫描”,用手机就可以把图片中的文字复制出来,据称扫图一秒钟就可………

微信小程序到底有哪些优点?以至于让阿里百度头条美团都来凑热闹

12月06日 16:55可以调用比H5更多的手机系统功能来进行开发,例如GPS定位、录音、拍视频、重力感应等,能开发更丰富的使用场景。 微信小程序的运营初期,很多用户对于微信小程序都会抱有一定的好奇心理,这段时间内企业借助小程序可………

为什么互联网营销部门要把握住现在的小程序?

12月06日 16:55现在互联网营销企业越来越多,企业对于营销的需求也却来越高,因为它直接会影响到我们产品的销售,传统企业也需要互联网转型,在整个过程中我们需要紧跟时代的脚脖,不断的打造一些全新的产品,了解一些新的互联网营销方式,………

华为快应用推出新工具:微信小程序可直接转换成快应用

12月06日 16:55一方面,已经形成一定用户规模的APP在应用商店上架“即点即用”的快应用欲望不大,而另一方面,在每月的流量扶持计划中,中小开发者也很难露脸,以10月份入选快应用流量扶持计划的产品为例,淘票票、智行火车票、………

图片怎么转成文字?手机里这2个免费功能太强大了,秒变扫描仪

12月06日 16:55利用“扫一扫”,小编随手添加了张杂志图片,很快就能提取出图片中的文字,而且准确度高! 微信小程序可是个好东西,为我们拓展了许多非常好用的功能,提取图片中的文字自然也不例外。 迅捷文字识别还能进行票证………

小程序、O2O系统、商家、,三者怎样有效的结合起来?

12月06日 16:55究其原因是他们能够拥有外卖送餐人员,可以提供快速有效的服务,可以帮商家和用户节省时间和部分金钱,但是微信显然不会做这种事情,如果需要做O2O服务,那么如何进行配送或许是另一个难点,针对这一块,或许可以有人尝试………

佛山科睿(金蝶精斗云)联合仁和会计《财务创造利润》公益课程

12月06日 16:55因此,为了助力中小企业做好税务筹划工作,有效防范财税风险,并真正实现让财务创造利润,仁和会计教育受邀佛山科睿(金蝶)服务中心,于11月24日为大家带来了一场别开生面的公益讲座——《中小企业财税漏洞及………

v血拼V店主的“网变之路”

12月06日 16:55那时是东莞这个“世界工厂”的黄金年代,制造业蒸蒸日上,工人成千上万,她的成衣店1年的时间就开了3家。 然而随着移动互联网时代的到来,她发现即使自己多努力,也无法避免实体店经营的下滑,她的店从5家缩减为………

“百年老店”们怎样才能满足年轻人对于吃的花式需求?

12月06日 16:55不能站在用户角度为用户节省时间和精力的不会被优先选择(记住自己是和全城店家被用户做对比,移动互联网时代是用户市场) 用户的每个细分需求都可以成为一个构建场景,只有把用户当一个完整的人对待………

微信小程序如何渲染html内容(示例讲解)

12月06日 16:54本篇文章给大家带来的内容是关于微信小程序如何渲染html内容(示例讲解),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。最近又做了一个新的小程序关于物流订单查询遇到了一个小问题:数据中……

砍价微信小程序,如何让客户把自己的产品推出去

12月05日 17:19其实更重要是商家的一些经营思维要转换,现在的商家即使有了线上的平台但是如果不搞活动进行营销裂变,是没有流量会进来的,而最简单有效的方法就是通过一些砍价活动,拼团活动来把人吸引进来,然后通过这个产品的一些优惠力………

远丰电商丨为什么品牌商纷纷搭建商城小程序?

12月05日 17:19商城小程序与微信公众号是一种访问的关系,用户在阅读微信公众号文章时可以直接跳转到小程序上。 从各方面来看借助商城小程序,品牌方可以在微信社交及大数据的基础上,完善营销方式,有针对性的进行营销活动,提………

微信小程序怎么制作,个人5分钟制作微信小程序开发教程

12月05日 17:19随着小程序开发市场的完善,现在利用微冰小程序制作平台,不需要编程开发技术,个人也能可视化制作小程序了,最快5分钟制作微信小程序,轻松应对各行各业的应用场景。这些模板都是根据市场主流小程序页面设计而成的,用户可………

喜推打造“双核智能小程序+电销机器人”神器,引爆B端市场

12月05日 17:19例如,小方如果使用了喜推系统,其跟进客户的过程将自动保留,例如沟通的话术、在什么时候对客户进行了哪些行为。通过这些留存的记录和数据,就可以复现小方跟进客户的整个流程,企业只需要将这些话术或者跟进客户的方………

小程序流量变现,有哪些新玩法?(1)

12月05日 17:19(2)兴趣以及爱好:这应该是很多社群都喜欢而且效果最好的一种方式了,因为有同样喜好的用户,看到有共鸣的东西,都会很乐意去分享。 如果你能策划一次行之有效的活动,然后再去和公众号的推文,还有朋友圈以及………

QuestMobile移动互联网全景流量洞察:移动全用户时代正式来临,凭什么突围?

12月05日 17:19此前的行业分析,往往盯着巨头应用、用户和时长,忘记了一个重要的问题:移动互联网的本质并非社交、搜索、电商、资讯等等,而是移动+服务。 移动互联网全景流量,指某应用及服务通过APP、小程序、快应用、W………

餐饮行业入驻小程序生态圈能带来红利吗?

12月05日 17:18微信小程序的小游戏让很多人爱上了小程序,这也为餐饮行业提供了很大的流量机会,外卖平台也搭建了属于自己的小程序,用户可以随时用小程序点餐,逐渐培养的用户习惯及简单的开发模式,已经成为了小程序的竞争力,而微………

从苏宁易购来看百度小程序和微信小程序的区别

12月05日 17:18两者都是首页下拉出现最近使用小程序,但百度app下拉后是进入全屏页面,而微信这边则是从之前的一行,变为了两行,分别有最近使用与我的小程序,从体验上来说微信也许更好,不过百度这样来操作也许是为了给更多的入………

附近的小程序功能有什么

12月05日 17:18在门店小程序中,其今天还推出了“卡券投放”能力,线下商户获取这一能力后,用户可以在“门店小程序”中领域商家的会员卡、代金券或者买单券。 第四种则是新推出的“发现”页面,利用LBS功能,用户可以发现附………

谁快谁得利 实体店如何放到小程序上运营?

12月05日 17:18商家可以通过离线扫描获得微信的在线流量,实体店行业将小程序二维码放在实体店中,以便消费者可以更好地使用它,你可以知道商店的细节,我相信应该有很多消费者愿意尝试。 现在小程序的发展朝超过了我们的预期,面………

Copyright © 2016-2018 中国小程序 版权所有   网站地图

商务合作:897834588@qq.com