实例代码
<template> <div> <wxc-panel title="Transform" type="primary"> <wxc-button value="Rotate" onclick="{{rotate}}" type="primary" size="middle"></wxc-button> <wxc-button value="Scale" onclick="{{scale}}" type="primary" size="middle" style="margin-top:12px;"></wxc-button> <wxc-button value="Translate" onclick="{{translate}}" type="primary" size="middle" style="margin-top:12px;"></wxc-button> <wxc-button value="Transform" onclick="{{transform}}" type="success" size="middle" style="margin-top:12px;"></wxc-button> </wxc-panel> <wxc-panel title="Others" type="primary"> <wxc-button value="BgColor" onclick="{{color}}" type="primary" size="middle"></wxc-button> <wxc-button value="Opacity" onclick="{{opacity}}" type="primary" size="middle" style="margin-top:12px;"></wxc-button> <wxc-button value="All" onclick="{{composite}}" type="success" size="middle" style="margin-top:12px;"></wxc-button> </wxc-panel> <div id="block" class="block" style="transform-origin:{{transformOrigin}}"> <text class="block-txt">Anim</text> </div> </div> </template> <script> require('weex-components'); module.exports = { data: { transformOrigin: 'center center', current_rotate: 0, current_scale: 1, current_color: '#FF0000', current_opacity: 1, current_translate: '', current_transform: '', isStop: true }, methods: { anim: function(styles, timingFunction, duration, callback) { this.$call('animation', 'transition', this._ids.block.el.ref, { styles: styles, timingFunction: timingFunction, duration: duration }, callback); }, rotate: function() { var self = this; self.current_rotate += 90; self.anim({ transform: 'rotate(' + self.current_rotate + 'deg)' }, 'ease-in-out', 500, function() { if (self.current_rotate === 360) { self.current_rotate = 0; } else { self.rotate(); } }); }, translate: function() { this.current_translate = this.current_translate ? '' : 'translate(50%, 50%)'; this.anim({ transform: this.current_translate }, 'ease-in', 500, function() { }); }, scale: function() { var self = this; self.current_scale = self.current_scale === 2 ? .5 : 2 self.anim({ transform: 'scale(' + self.current_scale + ')' }, 'linear', 500, function() { }); }, transform: function() { var self = this; this.current_transform = this.current_transform ? '' : 'rotate(45deg) scale(1.5)'; this.anim({ transform: this.current_transform, transformOrigin: 'left top' }, 'ease-out', 500, function() { if (self.current_transform !== '') { self.anim({ transform: 'rotate(-90deg) scale(1.2)', transformOrigin: 'left top' }, 'ease-out', 500, function() { }) } else { } }); }, composite: function() { var self = this; self.current_transform = self.current_transform ? '' : 'rotate(45deg) scale(1.5) translate(50%, 50%)'; self.current_color = self.current_color === '#F0AD4E' ? '#D9534F' : '#F0AD4E'; self.current_opacity = self.current_opacity === 1 ? 0.1 : 1; this.anim({ transform: this.current_transform, transformOrigin: 'left top', backgroundColor: self.current_color, opacity: self.current_opacity }, 'ease-out', 1000, function() { }); }, color: function() { var self = this; self.current_color = self.current_color === '#F0AD4E' ? '#D9534F' : '#F0AD4E'; self.anim({ backgroundColor: self.current_color }, 'linear', 500, function() { }); }, opacity: function() { var self = this; self.current_opacity = self.current_opacity === 1 ? 0.1 : 1; self.anim({ opacity: self.current_opacity }, 'linear', 500, function() { }); } } }; </script> <style> .block { position: absolute; width: 250px; height: 250px; top: 300px; left: 400px; background-color: #F0AD4E; align-items: center; justify-content: center; } .block-txt { color: #FFFFFF; font-size: 70px; } </style>