小程序动画wx.createAnimation

首先上官网

将动画封装到一个函数,在需要的时候调用,也可以在满足一定条件时重复调用.

<view animation="{{animationData}}" ></view>
onLoad: function(){
    this.newInfor();
}

newInfor(){
      var animation = wx.createAnimation({
        duration: 1000,
        timingFunction: ‘linear‘,
      })

      this.animation = animation

      animation.translate(150).step()

      this.setData({
        animationData: animation.export()
      })

      setTimeout(function () {
        animation.translate(-150).step()
        this.setData({
          animationData: animation.export()
        })
      }.bind(this), 2000)
    }

原文地址:https://www.cnblogs.com/yourself/p/9712298.html

时间: 2024-11-11 12:03:14

小程序动画wx.createAnimation的相关文章

微信应用号小程序下载wx.downloadFile(OBJECT)

微信应用号小程序下载wx.downloadFile(OBJECT) wx.downloadFile(OBJECT) ? 下载文件资源到本地.客户端直接发起一个HTTP GET请求,把下载到的资源根据 type 进行处理,并返回文件的本地临时路径. OBJECT参数说明: 参数 类型 必填 必填 url String 是 下载资源的 url type String 否 下载资源的类型,用于客户端识别处理,有效值:image/audio/video header Object 否 HTTP 请求 H

微信小程序动画之弹出菜单

用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTranspond: {}, animInput: {}, animCloud:{}, aninWrite:{}, }, //点击弹出 plus: function () { if (this.data.isPopping) { //缩回动画 this.popp(); this.setData({ isPo

微信 小程序 drawImage wx.canvasToTempFilePath wx.saveFile 获取设备宽高 尺寸问题

以下问题测试环境为微信开发者0.10.102800,手机端iphone6,如有不对敬谢指出. 根据我的测试,context.drawImage,在开发者工具中并不能画出来,只有预览到手机中显示. wx.canvasToTempFilePath wx.saveFile 官方文档中只有一行,真是坑爹啊,原来 wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete,和wx.saveFile差不多: wx.canvasToTempFi

微信小程序---动画

1.学习大纲: 2. //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, animationData: [] }, //事件处理函数 bindViewTap: function() { console.log("点击了了...") // 点击头像开始动画 var animation = wx.createAnimation({ duration: 1000,

小程序,wx.request;动态向服务器端请求数据。

wx.request 通过微信封装的ajax,动态向服务器端请求数据.以下是在练习微信小程序时写的测试代码. 其中index.js文件如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //测试: wx.request({      url:'http://hd.jz-lm.com/mobile/Ceshi/index',      method: 'GET',      data: {},      header: {          'Ac

小程序开发wx.scanCode扫一扫接口,可以代替部分扫码枪的工作了

小程序扫码接口wx.scanCode挺有意思, 以后会代替部分扫码枪的工作, 而且小程序扫一扫还有自己特色的功能, 是扫码枪不具备的. 线下店面, 或许将来不需要电脑收银系统, 直接可以使用大屏手机, 就可以进行收付款, 商品管理. 在开发过程中, 使用小wx.scanCode()接口, 扫描了一些常见的应用场景, 得到的结果如下: 1. 扫描小程序码 返回结果 {"errMsg":"scanCode:ok","result":"*&q

微信小程序之 wx.getUserInfo引导用户授权问题

首先,在page外定义一个函数用户判断是否为空对象 var isEmptyObject = function (e) { var temp; for (temp in e) return !1; return !0 } 然后,在page中的onload里面调用授权 onLoad: function () { var that = this; if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInf

微信小程序之wx.navigateback往回携带参数

在微信小程序开发的过程当中  经常碰到一些带逻辑的一些事情 就比如 新增地址 修改地址  筛选用户条件等页面的时候  我们也可以用wx.navigateTo来跳转实现 但其中有很多问题 1.微信的十层跳转  当你用navigateTo跳转的时候跳转十次的时候就跳不动了 2.参数的传递 我们在用navigateTo跳转的时候通常带着参数来跳  试想一下 如果我们一种这么跳 那么携带的参数越来越多 这不是开发的一个好事情 所以在以上的问题上我们可以用navigateback来实现  既仅携带本次跳转

小程序的wx.onAccelerometerChange

https://www.2cto.com/kf/201802/724174.html(copy) 也许有人会问,小程序中都是竖直app形态,要横竖屏判断有什么用?即使判断出了横屏状态,你能把小程序横过来?答案是不能的,但是判断当前设备处于横屏或者竖屏状态来实现一些友好的用户体验交互方式的需求确实存在.例如手机横屏,让视频播放自动全屏,手机竖屏,让视频切换回来小屏. 然而,截止至目前,小程序官方的API中并没有提供这样的横竖屏判断的方法.那么我们只能自己想办法实现这样的判断.小程序的设备API中提