精华内容
下载资源
问答
  • 微信小程序动画

    2019-06-14 11:36:55
    微信小程序动画Animation https://download.csdn.net/download/weixin_42413802/11238874
    展开全文
  • 微信小程序 动画

    千次阅读 2017-06-15 12:08:51
    微信小程序 动画 一.先看一个例子及代码: 发射 .sure{ width: 10%; height:80rpx; margin-top: 0rpx; margin-left: 45%; background: #00ddff; border-radius: 50rpx; text-align: center; line-...

    一.先看一个例子及代码:


    <view  class="view_a">
    <image animation="{{animation}}" class="a_img" src="https://img-blog.csdn.net/20170614190537974?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"></image>
    </view>
    <view class="sure" bindtap="dh">发射</view>

    .sure{
      width: 10%;
      height:80rpx;
      margin-top: 0rpx;
      margin-left: 45%;
      background: #00ddff;
      border-radius: 50rpx;
      text-align: center;
      line-height: 80rpx;
      color: #fff;
    }
    .view_a{
      width: 100%;
      height: 900rpx;
      display: flex;
      background-image: url('https://img-blog.csdn.net/20170615103714645?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVUZPMDAwMDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center');
    }
    .a_img{
      margin-top: 600rpx;
      margin-left:100rpx;
      width: 80rpx;
      height:80rpx;
    }

    data: {
        animation : ''
     },
     dh: function(){
        var that = this;
         //实例化
         that.animation = wx.createAnimation({
           duration: 200,
           timingFunction: "ease",
           delay: 1000,
           transformOrigin: 'center',
           success: function (res) {
             console.log(res)
           }
         })
         that.animation
         .rotate(180).step()   //原点顺时针旋转180度  也可以不加.step() 不加的话便是动画同时执行
         .rotate(-180).step()  //原点逆时针旋转180度
         .rotate(0).step()     //回到初始
         .scale(1.3).step()    // x,y轴同时缩放1.3倍
         .translateX(90).step()//x轴偏移90px
         .translateY(20).step()//y轴偏移20px
         .skew(30).step()      //x轴沿顺时针偏移30度
         .skew(-30).step()     //x轴沿逆时针偏移30度
         .skew(0).step()       //返回不偏移时
         .rotateY(180).step()  //Y轴旋转180度
         .translateY(-222).step()//在y轴偏移-222px
         .matrix3d(0.8, 0, 28).step();
         that.setData({
           animation: that.animation.export()
         })},

    二. 小程序动画 Animation API


    wx.createAnimation(OBJECT)

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

    注意: export 方法每次调用后会清掉之前的动画操作 

    OBJECT参数说明:

    参数 类型 必填 默认值 说明
    duration Integer 400 动画持续时间,单位ms
    timingFunction String "linear" 定义动画的效果
    delay Integer 0 动画延迟时间,单位 ms
    transformOrigin String "50% 50% 0" 设置transform-origin

    timingFunction 有效值:

    说明
    linear 动画从头到尾的速度是相同的
    ease 动画以低速开始,然后加快,在结束前变慢
    ease-in 动画以低速开始
    ease-in-out 动画以低速开始和结束
    ease-out 动画以低速结束
    step-start 动画第一帧就跳至结束状态直到结束
    step-end 动画一直保持开始状态,最后一帧跳到结束状态
    var animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 1000,
      timingFunction: "ease",
      delay: 0
    })
    

    animation

    动画实例可以调用以下方法来描述动画,调用结束后会返回自身,支持链式调用的写法。

    animation 对象的方法列表:

    样式:

    方法 参数 说明
    opacity value 透明度,参数范围 0~1
    backgroundColor color 颜色值
    width length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
    height length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
    top length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
    left length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
    bottom length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值
    right length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值

    旋转:

    方法 参数 说明
    rotate deg deg的范围-180~180,从原点顺时针旋转一个deg角度
    rotateX deg deg的范围-180~180,在X轴旋转一个deg角度
    rotateY deg deg的范围-180~180,在Y轴旋转一个deg角度
    rotateZ deg deg的范围-180~180,在Z轴旋转一个deg角度
    rotate3d (x,y,z,deg) transform-function rotate3d

    缩放:

    方法 参数 说明
    scale sx,[sy] 一个参数时,表示在X轴、Y轴同时缩放sx倍数;两个参数时表示在X轴缩放sx倍数,在Y轴缩放sy倍数
    scaleX sx 在X轴缩放sx倍数
    scaleY sy 在Y轴缩放sy倍数
    scaleZ sz 在Z轴缩放sy倍数
    scale3d (sx,sy,sz) 在X轴缩放sx倍数,在Y轴缩放sy倍数,在Z轴缩放sz倍数

    偏移:

    方法 参数 说明
    translate tx,[ty] 一个参数时,表示在X轴偏移tx,单位px;两个参数时,表示在X轴偏移tx,在Y轴偏移ty,单位px。
    translateX tx 在X轴偏移tx,单位px
    translateY ty 在Y轴偏移tx,单位px
    translateZ tz 在Z轴偏移tx,单位px
    translate3d (tx,ty,tz) 在X轴偏移tx,在Y轴偏移ty,在Z轴偏移tz,单位px

    倾斜:

    方法 参数 说明
    skew ax,[ay] 参数范围-180~180;一个参数时,Y轴坐标不变,X轴坐标延顺时针倾斜ax度;两个参数时,分别在X轴倾斜ax度,在Y轴倾斜ay度
    skewX ax 参数范围-180~180;Y轴坐标不变,X轴坐标延顺时针倾斜ax度
    skewY ay 参数范围-180~180;X轴坐标不变,Y轴坐标延顺时针倾斜ay度

    矩阵变形:

    方法 参数 说明
    matrix (a,b,c,d,tx,ty) transform-function matrix
    matrix3d   transform-function matrix3d

    动画队列

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

    参考文章:动画APIhttps://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html



    展开全文
  • 真正的微信小程序动画折叠面板,css动画实现 真正的微信小程序动画折叠面板,css动画实现 真正的微信小程序动画折叠面板,css动画实现 真正的微信小程序动画折叠面板,css动画实现
  • 主要介绍了微信小程序 动画的简单实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 主要介绍了微信小程序动画Animation执行过程 / 实现过程 / 实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序 动画 放大 改变透明度
  • 微信小程序动画之点击效果

    万次阅读 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({ ...

    微信小程序动画之点击效果

    在这里插入图片描述
    代码:
    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({
          rippleStyle: ''
        });
        setTimeout(function () {
          that.setData({
            rippleStyle: 'top:' + y + 'px;left:' + x + 'px;-webkit-animation: ripple 0.4s linear;animation:ripple 0.4s linear;'
          });
        }, 200)
      },
    })
    
    

    wxml:

    <view class="ripple" style="{{rippleStyle}}"></view>
    <view class="container" bindtouchstart="containerTap"></view>
    
    

    wxss:

    page{height:100%}
    .container{
        width:100%;
        height:100%;
        overflow: hidden
    }
    .ripple {
        background-color:aquamarine;
        border-radius: 100%;
        height:10px;
        width:10px;
        margin-top: -90px;
        position: absolute;
        
        overflow: hidden
    }
    @-webkit-keyframes ripple {
        100% {
        webkit-transform: scale(12);
        transform: scale(12);
        background-color: transparent;
        }
    }
    
    
    展开全文
  • 微信小程序动画效果 最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡 闲来无事写了一个小demo <!--wxml代码--> <view class=...

    微信小程序动画效果

    最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡

    闲来无事写了一个小demo

    <!--wxml代码-->
    <view class="wrapper">
        	<!-- 微信小程序开发功能获取用户头像userAvatarUrl -->
            <view class="headerImage" catchtap="imageAnimation"  animation="{{animationData}}">
                <open-data type="userAvatarUrl" ></open-data>
            </view>
     		<!-- 微信小程序开发功能获取用户昵称userNickName -->
             <view class="headertext">
                <open-data type="userNickName" class="headertext"></open-data>
            </view>
            
    </view>
    
    /*wxss代码*/
    .wrapper {
      background: gold;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 500rpx;
    }
    
    .headerImage {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 40rpx;
    }
    
    .headertext {
      font-size: 40rpx;
    }
    
    //js
    const app = getApp()
    const computedBehavior = require('miniprogram-computed')//不用理会,这事引入的计算属属性
    Component({
      behaviors: [computedBehavior],)//不用理会,这事引入的计算属属性
      data: {
        //初始化
        animationData: "",
    
      },
    
      methods: {
        imageAnimation() {
          var animation = wx.createAnimation({
    
            duration: 4000,
            timingFunction: "ease",
            delay: 0,
            transformOrigin: "50% 50%",
    
          })
          // animation.rotate(360).step();     //旋转9
          //animation.scale(1.5).step();        //放大
          // animation.translate(0,200).step(); //偏移
          // animation.skew(30,50).step();      //倾斜x,y
          // animation.rotate(45).scale(0.8).translate(10,10).step() //同时执多个效果
          this.setData({
            animationData: animation.export(), //赋值
          })
    
        },
    
      },
      computed: {
    
      },
    })
    
    展开全文
  • 微信小程序...概览为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的 微信开发者工具,集成了公...
  • 为何现在的微信小程序还是高温不退?主要原因如下:无需安装、不占内存、易传播。废话不多说,开始进入开发!-----------小程序环境搭建-----------------------------------账号注册百度搜索 "微信公众平台"官网...
  • 主要介绍了微信小程序动画(Animation) 的实现及执行步骤,需要的朋友可以参考下
  • mpvue 是一个使用 Vue.js开发小程序的前端框架(美团的开源项目)。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 ...开发环境准备node.js微信小程序开发工具vue cli# 1. 先检查下 Node.js 是否安装成功$ node -vv8.9...
  • 前言16年小程序刚出来的时候,就准备花点时间去学学。...正好前段时间看到美团开源了一个使用vue来开发微信小程序的框架 mpvue。因为平时vue用的多,所以就决定使用 mpvue 来开发。mpvue 介绍我们看一下mpvue官网...
  • 微信小程序动画之圆形进度条

    万次阅读 2019-06-19 10:14:31
    微信小程序动画之圆形进度条 上图: 代码: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanvasContext('canvasArcCir'); Page({ data: { }, drawCircle: ...
  • 主要介绍了微信小程序动画组件,类似vue,且更强大使用解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 产品展示扫描下方小程序码或在微信小程序中搜索 WeScale,即可使用。人员介绍Myou Aki:明神,北漂前端,总有奇奇怪怪的想法想要实现,适合做产品的前端Dr.Chan:老陈,后端、前端通吃,长得帅说话又好听的茂名吃货...
  • 微信小程序动画之下拉刷新动画

    万次阅读 2019-06-01 11:04:27
    微信小程序动画之下拉刷新动画 简易的效果 下面放代码: js: var animation = wx.createAnimation({}) var i = 1; Page({ data: { donghua: true, left1: Math.floor(Math.random() * 250 + 1), left2: Math....
  • 当前时期的需求是做一个拼团的小程序。在这之前在做一个微信公众号H5项目,技术栈是Vue全家桶(vue+router+vuex+vant...)。在新的小程序项目中有很多组件类似于之前项目的组件,所以决定使用mpvue作为基础来搭建项目...
  • 效果展示 Demo代码 wxml  class="loading-screen">  class="loading">  class="flour" >view>  class="flour...animation-fill-mode 规定对象动画时间之外的状态 说明 Demo代码已同步至小程序 写留言|查看留言

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,634
精华内容 653
关键字:

微信小程序动画

微信小程序 订阅