Weex Playgroud
<template>
<div class="wrapper" style="padding-top:100px;padding-left:200px">
<text style="font-size: 60px;background-color: green;">hello</text>
<div ref="test" @click="move" class="box"></div>
</div>
</template>
<script>
const animation = weex.requireModule('animation')
const modal = weex.requireModule('modal')
export default {
methods: {
move () {
var testEl = this.$refs.test;
animation.transition(testEl, {
styles: {
color: '#FF0000',
transform: 'scale(2,2) rotate(45deg) translateY(50)',
transformOrigin: '0 0'
},
duration: 10000, //ms
timingFunction: 'ease',
delay: 0 //ms
}, function () {
modal.toast({ message: 'animation finished.' })
})
}
}
}
</script>
<style scoped>
.box {
width: 50px;
height: 50px;
background-color: #DDD;
}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
.div2
{
width:50px;
height:50px;
background-color:yellow;
/* Rotate div */
transform:scale(2,2) rotate(45deg) translateY(50px);
transition-property: transform;
transform-origin: 0 0 0;
}
</style>
</head>
<body>
<div style="padding-left:250px;padding-top:100px;">
<div style="width:100px;height:100px;background-color:green">Hello World2</div>
<div class="div2">Hello World</div>
</div>
</body>
</html>
home.vue
<template>
<div style="padding-left: 250px;padding-top: 60px">
<text style="font-size: 60px;background-color: green;">hello</text>
<w-animation :animation="animationData" style="background-color:red;height:50px;width:50px"></w-animation>
</div>
</template>
<script>
import wx from "./../../common/wx"
import wanimation from "./../../common/components/animation"
import console from "./../../common/console"
export default {
components:{
"w-animation":wanimation
},
data:function () {
return {
animationData: {}
}
},
mixins: [require('./../../common/publish').publish,require('./../../mixins.js').basePage],
mounted:function(){
this.onShow();
},
methods:{
onShow: function(){
var animation = wx.createAnimation({
duration: 10000,
timingFunction: 'ease',
transformOrigin:"0 0 0"
})
this.animation = animation
// animation.scale(2,2).rotate(45).step()
animation.scale(2,2).rotate(45).translateY(50).step()
this.setData({
animationData:animation.export()
})
/* setTimeout(function() {
animation.translateY(30).step()
this.setData({
animationData:animation.export()
})
}.bind(this), 1000)*/
},
rotateAndScale: function () {
// 旋转同时放大
this.animation.rotate(45).scale(2, 2).step()
this.setData({
animationData: this.animation.export()
})
},
rotateThenScale: function () {
// 先旋转后放大
this.animation.rotate(45).step()
this.animation.scale(2, 2).step()
this.setData({
animationData: this.animation.export()
})
},
rotateAndScaleThenTranslate: function () {
// 先旋转同时放大，然后平移
this.animation.rotate(45).scale(2, 2).step()
this.animation.translate(100, 100).step({ duration: 1000 })
this.setData({
animationData: this.animation.export()
})
}
}
}
</script>
js/pages/common/components/animation.vue
<template>
<div ref="animation_ref">
<slot></slot>
</div>
</template>
<script>
import wx from "./../wx";
import console from "./../console";
export default {
props: {
animation: {
default: {}
}
},
watch: {
animation: {
handler: function (newVal, oldVal) {
//this.w_value = newVal;
this.animationData = newVal;
this.handle();
}
}
},
data: function () {
return {
index: 0,
animationData: []
};
},
methods: {
handle() {
//console.log("handle");
// console.log(JSON.stringify(this.animationData));
var that = this;
if (this.animationData.length > 0) {
this.index = 0;
this.$nextTick(function () {
that.step();
});
}
},
step() {
if (this.index < this.animationData.length) {
const animation = weex.requireModule('animation');
var that = this;
var animation_ref = this.$refs.animation_ref;
console.log(this.animationData[this.index]);
animation.transition(animation_ref, this.animationData[this.index], function () {
that.finishEvent();
});
}
},
finishEvent() {
this.index = this.index + 1;
this.step();
}
},
mounted:function () {
/*this.animationData = this.animation;
this.handle();*/
}
}
</script>
js/pages/common/animation.js
import console from "./console"
module.exports = class animation {
constructor(data) {
this.data = {
duration: data.duration || 400, //ms
timingFunction: data.timingFunction || 'linear',
needLayout: false,
delay: data.delay || 0
};
this.origin_data = this.data;
this.lists = {};
this.transform = [];
this.animationData = [];
this.transformOrigin = {};
if (data.transformOrigin == undefined) {
data.transformOrigin = "50% 50% 0";
}
var arr = data.transformOrigin.split(" ");
this.transformOrigin = arr[0] + " " + arr[1];
}
backgroundColor(value) {
this.lists.backgroundColor = value;
return this;
}
left(value) {
//this.lists.left = value;
return this;
}
right(value) {
// this.lists.width = value;
return this;
}
top(value) {
//this.lists.width = value;
return this;
}
bottom(value) {
//this.lists.width = value;
return this;
}
width(value) {
this.lists.width = parseInt(value);
return this;
}
height(value) {
this.lists.height = parseInt(value);
return this;
}
opacity(value) {
this.lists.opacity = value;
return this;
}
scale(x, y) {
if (y == undefined) y = x;
this.transform.push('scale(' + x + ',' + y + ')');
return this;
}
scaleX(x) {
this.transform.push('scaleX(' + x + ')');
return this;
}
scaleY(y) {
this.transform.push('scaleY(' + y + ')');
return this;
}
scaleZ(value) {
return this;
}
scale3d(value) {
return this;
}
rotate(x) {
this.transform.push("rotate(" + x + "deg)");
return this;
}
rotateX(x) {
this.transform.push('rotateX(' + x + 'deg)');
return this;
}
rotateY(y) {
this.transform.push('rotateY(' + y + 'deg)');
return this;
}
rotateZ(value) {
return this;
}
rotate3d(value) {
return this;
}
translate(x, y) {
if (y == undefined) {
return this.translateX(x);
} else {
this.transform.push('translate(' + x + ',' + y + ')');
return this;
}
}
translateX(x) {
this.transform.push('translateX(' + x + ')');
return this;
}
translateY(y) {
this.transform.push('translateY(' + y + ')');
return this;
}
translateZ(value) {
return this;
}
translate3d(value) {
return this;
}
skew(value) {
return this;
}
skewX(value) {
return this;
}
skewY(value) {
return this;
}
step(obj) {
var styles = this.lists;
if (this.transform.length > 0) {
styles.transform = this.transform.join(" ");
}
var data = this.data;
if(obj != undefined){
if (obj.transformOrigin != undefined) {
var arr = obj.transformOrigin.split(" ");
this.transformOrigin = arr[0] + " " + arr[1];
}
if (obj.duration != undefined) {
data.duration = obj.duration;
}
if (obj.timingFunction != undefined) {
data.timingFunction = obj.timingFunction;
}
if (obj.delay != undefined) {
data.delay = obj.delay;
}
}
styles.transformOrigin = this.transformOrigin;
data.styles = styles;
this.animationData.push(data);
return this;
}
matrix() {
return this;
}
matrix3d() {
return this;
}
export() {
var animationData = this.animationData;
this.animationData = [];
//this.transform = [];
//this.lists = {};
console.log(JSON.stringify(animationData));
return animationData;
}
}