EEUI.APP EEUI.APP 首页 文档 - 指南 - 组件 - 模块 插件 - 插件市场 - 开发文档 热更新 控制台 Editor 例子 社区 GitHub 首页 文档 - 指南 - 组件 - 模块 插件 - 插件市场 - 开发文档 热更新 控制台 Editor 例子 社区 GitHub - 模块 - adDialog广告弹窗 - ajax异步请求 - alert对话框 - caches缓存管理 - captcha验证弹窗 - keyboard键盘功能 - loading等待动画 - navigationBar标题栏 - navigator路由功能 - newPage页面功能 - openOtherApp打开其他APP - plate复制粘贴 - saveImage保存图片 - getImageSize图片尺寸 - scaner二维码扫描 - share文字图片分享 - storage数据储存 - system系统信息 - toast提示功能 - version版本相关 - weex模块 - animation - transition - clipboard - dom - globalEvent - meta - modal - picker - storage - stream - webview
    # # animation animation 模块可以用来在组件上执行动画。JS-Animation可以对组件执行一系列简单的变换 (位置、大小、旋转角度、背景颜色和不透明度)。 举个例子，如果有一个 # animation - 图4 组件，通过动画你可以对其进行移动、旋转、拉伸或收缩等动作。 TIP 如果需要使用CSS动画，参考 transition 或 transform。 
    1. animation.transition(ref1, {
    2.     styles: {
    3.         backgroundColor: '#FF0000',
    4.         transform: 'translate(250px, 100px)',
    5.     },
    6.     duration: 800, //ms
    7.     timingFunction: 'ease',
    8.     needLayout:false,
    9.     delay: 0 //ms
    10.     }, function () {
    11.         modal.toast({ message: 'animation finished.' })
    12.     })
    - 示例 # # 文档 ## # transition #### # transition(ref, options, callback) - @ref，将要执行动画的元素。例如指定动画的元素 ref 属性为 test，可以通过调用 this.$refs.test 来获取元素的引用。 - @options，动画参数 - styles，设置不同样式过渡效果的键值对，下表列出了所有合法的参数： - width - height - backgroundColor - opacity - transformOrigin - transform - translate/translateX/translateY - rotate/rotateX/rotateY - perspective - scale/scaleX/scaleY - duration，duration(number)：指定动画的持续时间 (单位是毫秒)，默认值是 0，表示瞬间达到动画结束状态。 - delay，delay (number)：指定请求动画操作到执行动画之间的时间间隔 (单位是毫秒)，默认值是 0，表示没有延迟，在请求后立即执行动画。 - needLayout，needLayout (boolean)：动画执行是否影响布局，默认值是false。 - timingFunction，timingFunction (string)：描述动画执行的速度曲线，用于描述动画已消耗时间和动画完成进度间的映射关系。默认值是 linear，表示动画从开始到结束都拥有同样的速度。下表列出了所有合法的属性： - linear:动画从头到尾的速度是相同的 - ease-in:动画速度由慢到快 - ease-out:动画速度由快到慢 - ease-in-out:动画先加速到达中间点后减速到达终点 - cubic-bezier(x1, y1, x2, y2):在三次贝塞尔函数中定义变化过程，函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 cubic-bezier 和 Bézier curve 。 - @callback，callback是动画执行完毕之后的回调函数。在iOS平台上，你可以获取动画执行是否成功的信息。 @style 中可以做动画的属性 - width，width表示动画执行后应用到组件上的宽度值。如果你需要影响布局，设置needLayout为true。默认值为computed width。 - height，height表示动画执行后应用到组件上的高度值。如果你需要影响布局，设置设置为 needLayout为true。默认值为computed width。 - backgroundColor，backgroundColor动画执行后应用到组件上的背景颜色，默认值为computed backgroundColor。 - opacity，opacity表示动画执行后应用到组件上的不透明度值，默认值为computed opacity。 - transformOrigin，transformOrigin定义变化过程的中心点，如transformOrigin: x-axis y-axis 参数 x-axis 可能的值为 left、center、right、长度值或百分比值，参数 y-axis 可能的值为 top、center、bottom、长度值或百分比。默认值为center center。 - transform，transform变换类型，可能包含rotate，translate，scale`及其他属性。默认值为空。 - translate/translateX/translateY指定元素要移动到的位置。单位是长度或百分比，默认值是0. - rotate/rotateX/rotateYv0.16+ 指定元素将被旋转的角度。单位是度 角度度，默认值是0 - scale/scaleX/scaleY按比例放大或缩小元素。单位是数字，默认值是1 - perspectivev0.16+ 观察者距离z=0平面的距离，在Android 4.1及以上有效。单位值数字，默认值为正无穷。 TIP - iOS上可以获取 animation 是否执行成功的信息，callback中的result参数会有两种，分别是是Success与Fail。 - Android 的callback 函数不支持result参数。 在 GitHub 上编辑此页

    最后一次更新: 6/7/2019, 8:03:58 AM

    ← version clipboard →