阿里云赞助

animation

animation

Smooth and meaningful animation is very effective for enhancing the user experience of mobile application, you can use the animation module to perform animation on components. A animation can perform a series of simple transformations (position, size, rotation, background color, and opacity) on the component. So, if you have a image component, you can move, rotate, grow, or shrink it.

API

transition(node, options, callback)

Arguments

node

type: node

position: An element that will be animated, for example , specify the ref attribute for the element you want to animated as element, so you can get this element by calling this.refs.element.

options

type: object

position: Transition options.

  • duration (number): Specifies the number of milliseconds of animation execution, the default value is 0, means that no animation will occur.
  • delay (number): Specifies the amount of milliseconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. The default value is 0.
  • needLayout(boolean):Whether or not the layout animation occurs when animation is executed,default value is false
  • timingFunction (string): Used to describe how the intermediate values of the styles being affected by a transition effect are calculated, default value is linear, the allowed attributes are listed in the following table:
name description
linear Specifies a transition effect with the same speed from start to end
ease-in Specifies a transition effect with a slow start
ease-out Specifies a transition effect with a slow end
ease-in-out Specifies a transition effect with a slow start and end
cubic-bezier(x1, y1, x2, y2) Define your own values in the cubic-bezier function. Possible values are parameter values from 0 to 1. More information about cubic-bezier please visit cubic-bezier and Bézier curve.
  • styles (object): Specify the names and values of styles to which a transition effect should be applied. The allowed attributes are listed in the following table:
name description value type default value
width The width applied to the component after the animation finished. length none
height The height applied to the component after the animation finished. length none
backgroundColor The background color applied to the component after the animation finished. string none
opacity The opacity applied to the component after the animation finished. number between 0 to 1 1
transformOrigin The povit of transition. The possible values for x-aris are left/center/right/length or percent, and possible values of y-axis are top/center/bottom/ length or percent x-axis y-axis center center
transform Transform function to be applied to the element. The properties in the following table are supported object none

properties of transform:

name description value type default value
translate/translateX/translateY Specifies the location of which the element will be translated to. pixel or percent none
rotate/rotateX v0.14+ /rotateY v0.14+ Specifies the angle of which the element will be rotated, the unit is degree. number none
perspective v0.16+ The distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Supported for Android 4.1 and above. number positive infinity
scale/scaleX/scaleY Stretch or shrink the element. number none
  • callback(function): Callback which is called after the completion of transition.NOTISE, after WeexSDK0.16.0, in iOS platform can get animation’s message about completion, there are two types of parameters with result, is Successand Fail, Android can not support until now.

Example

<template>
<div class="wrapper">
<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: 'translate(250px, 100px)',
transformOrigin: 'center center'
},
duration: 800, //ms
timingFunction: 'ease',
needLayout:false,
delay: 0 //ms
}, function () {
modal.toast({ message: 'animation finished.' })
})
}
}
}
</script>
<style scoped>
.box {
width: 250px;
height: 250px;
background-color: #DDD;
}
</style>

try it

Apache Incubator
Disclaimer: Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.


ApacheCopyright(c) 2017 The Apache Software Foundation. Licensed under the Apache License, Version 2.0