| <template> |
| <div> |
| <panel title="Transform" type="primary"> |
| <button value="Rotate" @click.native="rotate" type="primary" size="middle"></button> |
| <button value="Scale" @click.native="scale" type="primary" size="middle" style="margin-top:12px;"></button> |
| <button value="Translate" @click.native="translate" type="primary" size="middle" |
| style="margin-top:12px;"></button> |
| <button value="Transform" @click.native="transform" type="success" size="middle" |
| style="margin-top:12px;"></button> |
| </panel> |
| |
| <panel title="Others" type="primary"> |
| <button value="BgColor" @click.native="color" type="primary" size="middle"></button> |
| <button value="Opacity" @click.native="opacity" type="primary" size="middle" |
| style="margin-top:12px;"></button> |
| <button value="All" @click.native="composite" type="success" size="middle" style="margin-top:12px;"></button> |
| </panel> |
| |
| <div ref="block" class="block" :style="{ transformOrigin: transformOrigin }"> |
| <text class="block-txt">Anim</text> |
| </div> |
| </div> |
| </template> |
| |
| <script> |
| var animation = weex.requireModule('animation') |
| module.exports = { |
| data: function () { |
| return { |
| transformOrigin: 'center center', |
| current_rotate: 0, |
| current_scale: 1, |
| current_color: '#FF0000', |
| current_opacity: 1, |
| current_translate: '', |
| current_transform: '', |
| isStop: true |
| } |
| }, |
| components: { |
| panel: require('./include/panel.vue'), |
| button: require('./include/button.vue') |
| }, |
| methods: { |
| anim: function(styles, timingFunction, duration, callback) { |
| animation.transition(this.$refs.block, { |
| 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 scoped> |
| .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> |