zoukankan      html  css  js  c++  java
  • 微信小程序---动画

    1.学习大纲:

    2.

    //index.js
    //获取应用实例
    var app = getApp()
    Page({
      data: {
        motto: 'Hello World',
        userInfo: {},
        animationData: []
      },
      //事件处理函数
      bindViewTap: function() {
        console.log("点击了了...")
       // 点击头像开始动画
        var animation = wx.createAnimation({
          duration: 1000,
          timingFunction: 'ease',
        })
        this.animation = animation
    // 缩放和旋转 animation.scale(
    2,2).rotate(45).step() this.setData({ animationData:animation.export() }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } })
    <!--index.wxml-->
    <view class="container">
      <view  bindtap="bindViewTap" class="userinfo">
        <image animation = "{{animationData}}" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>
  • 相关阅读:
    自定义线性表
    网站关键词抓住热点话题获取长尾关键词 给网站增添流量(图)
    Hibernate常见注解说明
    面试问题java基础
    Spring常见的注解说明
    poj3268
    poj3273
    poj3250
    poj3277
    poj3253
  • 原文地址:https://www.cnblogs.com/pengsi/p/6443600.html
Copyright © 2011-2022 走看看