| (window.webpackJsonp=window.webpackJsonp||[]).push([[145],{389:function(t,e,s){"use strict";s.r(e);var n=s(0),a=Object(n.a)({},(function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"content"},[t._m(0),t._m(1),t._m(2),t._m(3),s("ul",[s("li",[s("a",{attrs:{href:"http://dotwe.org/vue/2d1b61bef061448c1a5a13eac9624410",target:"_blank",rel:"noopener noreferrer"}},[t._v("示例"),s("OutboundLink")],1)])]),t._m(4),s("div",{staticClass:"tip custom-block"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),s("p",[t._v("如果需要使用CSS动画，参考 "),s("router-link",{attrs:{to:"./../styles/common-styles.html#property"}},[t._v("transition")]),t._v(" 或 "),s("router-link",{attrs:{to:"./../styles/common-styles.html#transform"}},[t._v("transform")]),t._v("。")],1)]),t._m(5),t._m(6),t._m(7),s("ul",[t._m(8),s("li",[s("strong",[t._v("@options")]),t._v("，动画参数\n"),s("ul",[t._m(9),t._m(10),t._m(11),t._m(12),s("li",[t._m(13),t._v("，"),s("code",[t._v("timingFunction")]),t._v(" (string)：描述动画执行的速度曲线，用于描述\b动画\b已消耗时间和动画完成进度间的映射关系。默认值是 "),s("code",[t._v("linear")]),t._v("，表示动画从开始到结束都拥有同样的速度。下表列出了所有合法的属性：\n"),s("ul",[t._m(14),t._m(15),t._m(16),t._m(17),s("li",[s("code",[t._v("cubic-bezier(x1, y1, x2, y2)")]),t._v(":在三次贝塞尔函数中定义变化过程，函数的参数值必须处于 0 到 1 之间。更多关于三次贝塞尔的信息请参阅 "),s("a",{attrs:{href:"http://cubic-bezier.com/",target:"_blank",rel:"noopener noreferrer"}},[t._v("cubic-bezier"),s("OutboundLink")],1),t._v(" 和 "),s("a",{attrs:{href:"https://en.wikipedia.org/wiki/B%C3%A9zier_curve",target:"_blank",rel:"noopener noreferrer"}},[t._v("Bézier curve"),s("OutboundLink")],1),t._v("。")])])])])]),t._m(18)]),t._m(19),t._m(20),t._m(21)])}),[function(){var t=this.$createElement,e=this._self._c||t;return e("h1",{attrs:{id:"animation"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#animation"}},[this._v("#")]),this._v(" animation")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[e("code",[this._v("animation")]),this._v(" 模块可以用来在组件上执行动画。JS-Animation可以对组件执行一系列简单的变换 (位置、大小、旋转角度、背景颜色和不透明度)。")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("举个例子，如果有一个 "),e("code",[this._v("<image>")]),this._v(" 组件，通过动画你可以对其进行移动、旋转、拉伸或收缩等动作。")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("animation"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("transition")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ref1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n styles"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n backgroundColor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#FF0000'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n transform"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'translate(250px, 100px)'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n duration"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("800")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//ms")]),t._v("\n timingFunction"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ease'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n needLayout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n delay"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//ms")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n modal"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toast")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" message"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'animation finished.'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"warning custom-block"},[s("p",{staticClass:"custom-block-title"},[t._v("Android 兼容性")]),s("p",[t._v("你有可能会遇到如下Crash "),s("strong",[t._v("Unable to create layer for xxx")]),t._v(" 如果你的含有 "),s("code",[t._v("animation")]),t._v(" 的 "),s("code",[t._v("component")]),t._v(" 的大小("),s("em",[t._v("长或宽")]),t._v(")超过了最大值，因为这会使 OpenGL 内存区域发生 "),s("code",[t._v("OutOfMemory")]),t._v("。")]),s("p",[t._v("你的 "),s("code",[t._v("component")]),t._v(" 的允许的最大值与机器有关，但一般来说，如果你的 "),s("code",[t._v("component")]),t._v(" 的大小超过屏幕大小，就有可能触发Crash。")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h1",{attrs:{id:"文档"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#文档"}},[this._v("#")]),this._v(" 文档")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"transition"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#transition"}},[this._v("#")]),this._v(" transition")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h4",{attrs:{id:"transition-ref-options-callback"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#transition-ref-options-callback"}},[this._v("#")]),this._v(" transition(ref, options, callback)")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("li",[s("strong",[t._v("@ref")]),t._v("，将要执行动画的元素。例如指定动画的元素 "),s("code",[t._v("ref")]),t._v(" 属性为 "),s("code",[t._v("test")]),t._v("，可以通过调用 "),s("code",[t._v("this.$refs.test")]),t._v(" 来获取元素的引用。")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("li",[s("strong",[s("code",[t._v("styles")])]),t._v("，设置不同样式过渡效果的键值对，下表列出了所有合法的参数：\n"),s("ul",[s("li",[t._v("width")]),s("li",[t._v("height")]),s("li",[t._v("backgroundColor")]),s("li",[t._v("opacity")]),s("li",[t._v("transformOrigin")]),s("li",[t._v("transform\n"),s("ul",[s("li",[t._v("translate/translateX/translateY")]),s("li",[t._v("rotate/rotateX/rotateY")]),s("li",[t._v("perspective")]),s("li",[t._v("scale/scaleX/scaleY")])])])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("strong",[e("code",[this._v("duration")])]),this._v("，"),e("code",[this._v("duration")]),this._v("(number)：指定动画的持续时间 (单位是毫秒)，默认值是 "),e("code",[this._v("0")]),this._v("，表示瞬间达到动画结束状态。")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("strong",[e("code",[this._v("delay")])]),this._v("，"),e("code",[this._v("delay")]),this._v(" (number)：指定请求动画操作到执行动画之间的时间间隔 (单位是毫秒)，默认值是 "),e("code",[this._v("0")]),this._v("，表示没有延迟，在请求后立即执行动画。")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("strong",[e("code",[this._v("needLayout")])]),this._v("，"),e("code",[this._v("needLayout")]),this._v(" (boolean)：动画执行是否影响布局，默认值是false。")])},function(){var t=this.$createElement,e=this._self._c||t;return e("strong",[e("code",[this._v("timingFunction")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("linear")]),this._v(":动画从头到尾的速度是相同的")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("ease-in")]),this._v(":动画速度由慢到快")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("ease-out")]),this._v(":动画速度由快到慢")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("ease-in-out")]),this._v(":动画先加速到达中间点后减速到达终点")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("strong",[this._v("@callback")]),this._v("，"),e("code",[this._v("callback")]),this._v("是动画执行完毕之后的回调函数。在iOS平台上，你可以获取动画执行是否成功的信息。")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"tip custom-block"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),s("ul",[s("li",[t._v("iOS上可以获取 animation 是否执行成功的信息，callback中的"),s("code",[t._v("result")]),t._v("参数会有两种，分别是是"),s("code",[t._v("Success")]),t._v("与"),s("code",[t._v("Fail")]),t._v("。")]),s("li",[t._v("Android 的callback 函数不支持result参数。")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h4",{attrs:{id:"styles中支持动画的属性"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#styles中支持动画的属性"}},[this._v("#")]),this._v(" styles中支持动画的属性")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("ul",[s("li",[s("strong",[s("code",[t._v("width")])]),t._v("，"),s("code",[t._v("width")]),t._v("表示动画执行后应用到组件上的宽度值。如果你需要影响布局，设置"),s("code",[t._v("needLayout")]),t._v("为"),s("code",[t._v("true")]),t._v("。默认值为"),s("code",[t._v("computed width")]),t._v("。")]),s("li",[s("strong",[s("code",[t._v("height")])]),t._v("，"),s("code",[t._v("height")]),t._v("表示动画执行后应用到组件上的高度值。如果你需要影响布局\b，设置设置为 "),s("code",[t._v("needLayout")]),t._v("为"),s("code",[t._v("true")]),t._v("。默认值为"),s("code",[t._v("computed width")]),t._v("。")]),s("li",[s("strong",[s("code",[t._v("backgroundColor")])]),t._v("，"),s("code",[t._v("backgroundColor")]),t._v("动画执行后应用到组件上的背景颜色，默认值为computed backgroundColor。")]),s("li",[s("strong",[s("code",[t._v("opacity")])]),t._v("，"),s("code",[t._v("opacity")]),t._v("表示动画执行后应用到组件上的不透明度值，默认值为computed opacity。")]),s("li",[s("strong",[s("code",[t._v("transformOrigin")])]),t._v("，"),s("code",[t._v("transformOrigin")]),t._v("定义变化过程的中心点，如"),s("code",[t._v("transformOrigin: x-axis y-axis")]),t._v(" 参数 "),s("code",[t._v("x-axis")]),t._v(" 可能的值为 "),s("code",[t._v("left")]),t._v("、"),s("code",[t._v("center")]),t._v("、"),s("code",[t._v("right")]),t._v("、长度值或百分比值，参数 "),s("code",[t._v("y-axis")]),t._v(" 可能的值为 "),s("code",[t._v("top")]),t._v("、"),s("code",[t._v("center")]),t._v("、"),s("code",[t._v("bottom")]),t._v("、长度值或百分比。默认值为"),s("code",[t._v("center center")]),t._v("。")]),s("li",[s("strong",[s("code",[t._v("transform")])]),t._v("，"),s("code",[t._v("transform")]),t._v("变换类型，可能包含rotate"),s("code",[t._v("，")]),t._v("translate"),s("code",[t._v("，")]),t._v("scale`及其他属性。默认值为空。\n"),s("ul",[s("li",[s("code",[t._v("translate")]),t._v("/"),s("code",[t._v("translateX")]),t._v("/"),s("code",[t._v("translateY")]),t._v("指定元素要移动到的位置。单位是长度或百分比，默认值是0.")]),s("li",[s("code",[t._v("rotate")]),t._v("/"),s("code",[t._v("rotateX")]),t._v("/"),s("code",[t._v("rotateY")]),s("strong",[t._v("v0.16+")]),t._v(" 指定元素将被旋转的角度。单位是度 "),s("em",[t._v("角度度")]),t._v("，默认值是0")]),s("li",[s("code",[t._v("scale")]),t._v("/"),s("code",[t._v("scaleX")]),t._v("/"),s("code",[t._v("scaleY")]),t._v("按比例放大或缩小元素。单位是数字，默认值是1")]),s("li",[s("code",[t._v("perspective")]),s("strong",[t._v("v0.16+")]),t._v(" 观察者距离z=0平面的距离，在"),s("strong",[t._v("Android 4.1")]),t._v("及以上有效。单位值数字，默认值为正无穷。")])])])])}],!1,null,null,null);e.default=a.exports}}]); |