cvs
Version:
A basic canvas framework for 2d drawing.
1 lines • 4.81 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{229:function(t,a,e){"use strict";e.r(a);var s=e(0),n=Object(s.a)({},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"content"},[t._m(0),t._v(" "),e("p",[t._v("cvs 的时间轴使用的是 "),e("a",{attrs:{href:"https://github.com/spritejs/sprite-timeline",target:"_blank",rel:"noopener noreferrer"}},[t._v("sprite-timeline"),e("OutboundLink")],1),t._v("。Secne 实例的 timeline 属性是一个 Timeline 实例，之后子代的 timeline 属性都会基于其父集的 timeline 属性。")]),t._v(" "),t._m(1),t._v(" "),e("p",[t._v("通过控制 timeline.playbackRate (默认值为1) 的值来控制运动的速度，值越大表示运动越快，负值表示反向运动。")]),t._v(" "),t._m(2),t._m(3),t._v(" "),e("p",[t._v("timeline.currentTime 表示当前动画运动的时间，通过指定 timeline.currentTime 的值，可以定位到任意时刻的动画状态。")]),t._v(" "),t._m(4)])},[function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"timeline"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("#")]),this._v(" Timeline")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"timeline-playbackrate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timeline-playbackrate","aria-hidden":"true"}},[this._v("#")]),this._v(" timeline.playbackRate")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{attrs:{class:"token comment"}},[t._v("// 加速动画")]),t._v("\nlayer"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timeline"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("playbackRate "),e("span",{attrs:{class:"token operator"}},[t._v("+=")]),t._v(" "),e("span",{attrs:{class:"token number"}},[t._v("0.1")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// 减速动画")]),t._v("\nlayer"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timeline"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("playbackRate "),e("span",{attrs:{class:"token operator"}},[t._v("-=")]),t._v(" "),e("span",{attrs:{class:"token number"}},[t._v("0.1")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// 停止动画")]),t._v("\nlayer"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timeline"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("playbackRate "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// 开启动画")]),t._v("\nlayer"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timeline"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("playbackRate "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{attrs:{class:"token number"}},[t._v("1")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// 反向运动")]),t._v("\nlayer"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timeline"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("playbackRate "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{attrs:{class:"token operator"}},[t._v("-")]),e("span",{attrs:{class:"token number"}},[t._v("1")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"timeline-currenttime"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timeline-currenttime","aria-hidden":"true"}},[this._v("#")]),this._v(" timeline.currentTime")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{attrs:{class:"token comment"}},[t._v("// 重置动画")]),t._v("\nlayer"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timeline"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentTime "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{attrs:{class:"token number"}},[t._v("0")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// 定位到 8000 毫秒时的动画")]),t._v("\nlayer"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("timeline"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentTime "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{attrs:{class:"token number"}},[t._v("8000")]),t._v("\n")])])])}],!1,null,null,null);n.options.__file="timeline.md";a.default=n.exports}}]);