小程序动画_小程序动画 渐隐渐现 - CSDN
精华内容
参与话题
  • 小程序学习:动画animation

    万次阅读 2019-07-11 15:47:38
    wxml: <view class="box"> <view class="headerimg" bindtap="click" animation="{{animationData}}"> <open-data type="userAvatarUrl" ></open-data> &l...

    wxml:

    <view class="box">
    
            <view class="headerimg" bindtap="click"  animation="{{animationData}}">
                <open-data type="userAvatarUrl" ></open-data>
            </view>
    
             <view class="headertext">
                <open-data type="userNickName" class="headertext"></open-data>
            </view>
            
    </view>

    wxss:

    .box{
        background: skyblue;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 500rpx;
    }
    
    .headerimg{
        width: 200rpx;height: 200rpx;
        margin-bottom: 40rpx;
    }

    js:

    Page({
    
      /**页面的初始数据*/
      data: {
          animationData:"",
    
      },
    click:function(){
    
        //创建动画
        var animation = wx.createAnimation({
            
            duration: 4000,
            timingFunction: "ease",
            delay: 0,
            transformOrigin: "50% 50%",
    
        })
    
        //设置动画
        // animation.rotate(90).step();     //旋转90度
        //animation.scale(1.5).step();        //放大1.5倍
        //animation.translate(-30,-50).step();        //偏移x,y,z
        //animation.skew(30,50).step();        //倾斜x,y
    
        animation.rotate(45).scale(0.8).translate(10,10).step();     //边旋转边放大
    
    
         //导出动画数据传递给组件的animation属性。
        this.setData({
            animationData: animation.export(),
        })
    
    },
    
    
    
    })

    效果图:

         

    展开全文
  • 第一步:在wxml中 <button bindtap=" btn"> </button> <view class="slider" animation="{{ animations }}"></view> 第二步:在js中 在data中定义animations ... let...

    第一步:在wxml中

         <button bindtap=" btn "> </button>

        <view class="slider" animation="{{ animations }}"></view>

    第二步:在js中

       在data中定义animations

       data:{ animations:{} }

       事件触发btn

       btn(e){

          let that = this

          let xx = e.touches[0].clientX - 20 //拿到当前点击的位置x

          let yy = e.touches[0].clientY - 20  //拿到当前点击的位置y

          let animation = wx.createAnimation({   //创建动画

             duration: 300, //事件

             timingFunction: 'linear'  //运动曲线

          })

          animation.translate3d(xx, yy, 0).opacity(1).step().translate3d(264, 480, 0).opacity(0).step()  //分两步执行,先移动到点击的位置,再移动到固定位置

          that.setData({

             animations: animation  //赋值

          })

       }

     

    展开全文
  • 微信小程序动画详解

    千次阅读 2018-07-03 15:51:07
    动画水还是比较深的,这里只是简单介绍下小程序动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入。wx.createAnimation(object)看官方介绍1.创建一个动画实例...

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

    wx.createAnimation(object)

    • 看官方介绍

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

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

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

    主要属性:

    这里写图片描述

    这里主要树下timingFunction和transformOrigin

    • timingFunction 设置动画效果

      • linear 默认为linear 动画一直较为均匀
      • ease 开始时缓慢中间加速到快结束时减速
      • ease-in 开始的时候缓慢
      • ease-in-out 开始和结束时减速
      • ease-out 结束时减速
      • step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
      • step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
    • transformOrigin 设置动画的基点 默认%50 %50 0 

      • left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%
      • top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100% 

    动画组及动画方法

    样式:

    这里写图片描述

    旋转:

    这里写图片描述

    缩放:

    这里写图片描述

    偏移:

    这里写图片描述

    倾斜:

    这里写图片描述

    矩阵变形:

    这里写图片描述

    演示单个动画组效果

    这里写图片描述

    wxml

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

    • 
      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(){
          // 页面关闭
        }
      })



    演示多个动画组效果

    这里写图片描述

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

    展开全文
  • 小程序动画animation

    2018-11-19 22:08:58
    记录一下小程序动画的实现 先看布局文件wxml 代码也贴出来 &amp;lt;view class='container'&amp;gt; &amp;lt;!-- animation=&quot;{{animationRo}}&quot; bindtap='animate' --&amp;...

    记录一下小程序动画的实现
    先看布局文件wxml
    在这里插入图片描述
    代码也贴出来

    <view class='container'>
      <!-- animation="{{animationRo}}" bindtap='animate' -->
       <view class='logo_layout1' animation="{{animationRo}}" bindtap='animate'>
        <image class='logo' src='../../images/wenzi.gif' mode='aspectFill'></image>
        <text class='logo_name' mode="aspectFit" >拍蚊子</text>
      </view>
      <!-- <commonDialog dialogTitle="开始游戏" dialogText='确定开始吗' sureText='确定' cancleText='取消'></commonDialog> -->
    </view>
    

    js 代码如下:

      onShow: function () {
        var that = this;
        setTimeout(function(){
          var animate = wx.createAnimation({
            duration:1000,
            timingFunction:'linear',
            delay:0,
            transformOrigin:'50% 50% 0'
          });
          animate.rotate(90).step();
          that.setData({
            animationRo:animate.export(),
          });
        },500);
      },
    

    思路很简单
    先在布局里给view设置animation属性,然后在js文件里wx.createAnimation创建animation,最后把创建的animation用this.setData的方法设置给view的animation属性即可。

    公众号:程序员的日记,持续分享程序员界的日常生活,职业历程,行业资讯,欢迎关注
    在这里插入图片描述

    展开全文
  • 微信小程序动画效果集合

    万次阅读 2018-09-17 11:55:33
    Life is like riding a bicycle.To keep your balance you must keep moving. 生活就像骑自行车。为了保持平衡,你必须不断前进。 文字跑马灯效果: http://www.wxapp-union.com/portal.php?mod=view&...
  • 小程序动画

    2019-04-20 10:32:37
    效果:点击开启 旋转180度 显示关闭(如图) 实现过程 1.这是html <view class='expriment-content'>...view class='flip b1' animation="{{animationMain}}" bindtap='roateTap' data-id='1...
  • 小程序中的Animation动画

    千次阅读 2019-06-10 14:12:04
    小程序动画三步走 在需要动画效果的元素上给animation属性绑定一个变量,假设是textLeftAnimation 在需要的时机调用api创建动画对象并描述动画效果 利用this.setData() 将动画对象.export() 方法赋值到...
  • 小程序选项动画

    2019-05-08 18:06:35
    //index.wxml <!--index.wxml--> <view class="page"> <view class='cont'> <view class="list" wx:for="{{list}}" wx:key="key">...view class="block-view" id="time...
  • 微信小程序开发-76种动画 animate.css

    万次阅读 热门讨论 2018-10-24 22:06:15
    1、微信小程序动画有自己的方法:官方链接 但需要自己去写动画效果,比较麻烦。 2、本文介绍的是把animate.css这个非常棒的css库引入到小程序内使用。 animate.css包含76种动画,使用非常简单。animate.css官网 ...
  • 微信小程序动画之点击效果

    万次阅读 2019-06-03 16:27:29
    微信小程序动画之点击效果 代码: js: // pages/test/test.js Page({ containerTap: function (res) { var that = this var x = res.touches[0].pageX; var y = res.touches[0].pageY + 85; this.setData({ ...
  • 微信小程序例子——使用loading组件显示载入动画
  • 微信小程序循环动画效果的实现

    万次阅读 2018-07-16 15:00:14
    在微信小程序的交互效果中,通常通过各种动画效果来增强用户体验,本文通过微信小程序原生API来实现小程序中控件的各种动画效果,先看下本文最终的效果: 上图中的“关注公众号”动画就是我们要实现的效果。 ...
  • var circleCount = 0; // 心跳的外框动画 this.animationMiddleHeaderItem = wx.createAnimation({ duration:1000, // 以毫秒为单位 timingFunction: 'linear', delay: 100, ...
  • 微信小程序按钮点击动画

    千次阅读 2019-05-29 12:04:32
    微信小程序按钮点击动画 GIF看起来可能会有点卡 wxml <view class="confirm bubble">确定</view> wxss .confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; ...
  • 前端一定离不开一个东西,动画,无论是游戏还是app还是网页,都一定有动画效果,微信小游戏,小程序也有动画效果,这里有三种办法实现小程序动画效果。 1、每帧setData() onReady: function () { var that = ...
  • 微信小程序把玩(四十)animation API

    万次阅读 多人点赞 2016-09-30 16:26:06
    动画水还是比较深的,这里只是简单介绍下小程序动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入。wx.createAnimation(object) 看官方介绍1.创建一个动画实例...
  • 微信小程序开发——动画效果

    万次阅读 2018-04-20 14:04:01
    WeChat小程序交流(QQ群:769977169)动画效果的实现,使用wx.createAnimation实现。具体实现时,首先,创建动画对象,并设置相关的参数;其次,设置动画类型,并执行动画;第三,导出并设置动画数据;最后,将设置...
  • 微信小程序-实现元素渐入渐出动画效果-封装方法

    万次阅读 多人点赞 2018-08-24 12:06:59
    之前一直使用堪称“万能”的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数对其“无能为力”。 那没办法,只好自己写一个可以让元素渐入渐出的,可复用的函数了。做到...
  • 微信小程序 加载中 动画效果

    千次阅读 2019-06-04 14:34:15
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 效果图: 代码: <view class="line"> <image src="../../img/line.png"></image> </view> .line { ...
  • 突发奇想,做个录音的模块,结果折腾到一点钟,还在做话筒的动画. 最后发现微信还有bug,我也是醉了.有空再接着敲. 先上gif: 这还没完成,做完之后应该是水波纹的样子.无奈函数执行多次,动画只执行一次.还是先...
1 2 3 4 5 ... 20
收藏数 146,698
精华内容 58,679
关键字:

小程序动画