uni-app

uni-app

uni-app的理解

是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见 (opens new window)）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

uni-app的创建

1）跟着官网学习：快速上手
2）如果你熟悉小程序，但不熟悉vue
vue的学习：vue.js

uni-app项目

页面展示

代码展示

<template>
 <view>
  <page-head :title="title"></page-head>
 <view class="uni-padding-wrap uni-common-mt">	
   <view class="animation-element-wrapper">
    <view class="animation-element" :animation="animationData"></view>
	<view class="animation-image" :animation="animationData"></view>
   </view>
   
   <scroll-view class="animation-buttons" scroll-y="true">
    <button class="animation-button" @tap="rotate">旋转</button>
    <button class="animation-button" @tap="scale">缩放</button>
    <button class="animation-button" @tap="translate">移动</button>
    <button class="animation-button" @tap="skew">倾斜</button>
    <button class="animation-button" @tap="rotateAndScale">旋转并缩放</button>
    <button class="animation-button" @tap="rotateThenScale">旋转后缩放</button>
    <button class="animation-button" @tap="all">同时展⽰全部</button>
    <button class="animation-button" @tap="allInQueue">顺序展⽰全部</button>
    <button class="animation-button animation-button-reset" @tap="reset">还原</button>
   </scroll-view>
  </view>
 </view>
</template>
<script>
 export default {
  data() {
   return {
    title: 'createAnimation',
    animationData: ''
   }
  },
  // 事件在用户退出页面时发生
  onUnload(){
   this.animationData = ''
  },
  onLoad() {
   this.animation = uni.createAnimation()
  },
  methods: {
   rotate: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
    this.animationData = this.animation.export()
   },
   scale: function () {
    this.animation.scale(Math.random() * 2).step()
    this.animationData = this.animation.export()
   },
   translate: function () {
    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
    this.animationData = this.animation.export()
   },
   skew: function () {
    this.animation.skew(Math.random() * 90, Math.random() * 90).step()
    this.animationData = this.animation.export()
   },
   rotateAndScale: function () {
    this.animation.rotate(Math.random() * 720 - 360)
     .scale(Math.random() * 2).step()
    this.animationData = this.animation.export()
   },
   rotateThenScale: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
     .scale(Math.random() * 2).step()
    this.animationData = this.animation.export()
   },
   all: function () {
    this.animation.rotate(Math.random() * 720 - 360)
     .scale(Math.random() * 2)
     .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
     .skew(Math.random() * 90, Math.random() * 90)
     .step()
    this.animationData = this.animation.export()
   },
   allInQueue: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
     .scale(Math.random() * 2).step()
     .translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
     .skew(Math.random() * 90, Math.random() * 90).step()
    this.animationData = this.animation.export()
   },
   reset: function () {
    this.animation.rotate(0, 0)
     .scale(1)
     .translate(0, 0)
     .skew(0, 0)
     .step({
      duration: 0
     })
    this.animationData = this.animation.export()
   }
  }
 }
</script>
<style>
 .animation-element-wrapper {
  display: flex;
  width: 100%;
  padding-top: 150upx;
  padding-bottom: 150upx;
  justify-content: center;
  overflow: hidden;
  background-color: #ffffff;
 }
 .animation-element {
  width: 200upx;
  height: 200upx;
  background-color: #1AAD19;
 }
 .animation-image{
	 width: 200upx;
	 height: 200upx;
	 background-color: #ff5500;
 }
 .animation-buttons {
  padding:30upx 0;
  width: 100%;
  height: 360upx;
 }
 .animation-button {
  float: left;
  line-height: 2;
  width: 44%;
  margin: 15upx 3%;
 }
 .animation-button-reset {
  width: 94%;
 }
</style>

业务逻辑

1.主要是事件的绑定和动画的效果
2.动画效果方法与属性：animation