update ticker

Author: jljsj33

examples/scrollAnim.js

@@ -2,23 +2,28 @@ import Tween from 'rc-tween-one';
 import React from 'react';
 import ReactDom from 'react-dom';
 import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
-import { Row, Col } from 'antd';
 
 function Demo() {
   return (
     <div>
       <div style={{ height: 800 }}>往下滚动</div>
       <ScrollOverPack
         style={{ height: 800 }}
-        component={Row}
-        componentProps={{ gutter: { md: 12, sm: 5 } }}
       >
         <Tween
           key="1"
           animation={{ y: 30, type: 'from', ease: 'easeOutQuart', opacity: 0 }}
           reverseDelay={200}
           style={{ background: '#fff000' }}
-          component={Col}
+        >
+          执行动画
+        </Tween>
+        <Tween
+          key="2"
+          id="12"
+          animation={{ y: 30, delay: 100, ease: 'easeOutQuart', type: 'from', opacity: 0, id: 12 }}
+          reverseDelay={100}
+          style={{ background: '#000fff' }}
         >
           执行动画
         </Tween>

examples/scrollAnimChildrenUpdateStyle.html

@@ -0,0 +1 @@
+placeholder

examples/scrollAnimChildrenUpdateStyle.js

@@ -0,0 +1,29 @@
+import Tween from 'rc-tween-one';
+import React from 'react';
+import ReactDom from 'react-dom';
+import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import { Row, Col } from 'antd';
+
+function Demo() {
+  return (
+    <div>
+      <div style={{ height: 800 }}>往下滚动</div>
+      <ScrollOverPack
+        style={{ height: 800 }}
+        component={Row}
+        componentProps={{ gutter: { md: 12, sm: 5 } }}
+      >
+        <Tween
+          key="1"
+          animation={{ y: 30, type: 'from', ease: 'easeOutQuart', opacity: 0 }}
+          reverseDelay={200}
+          style={{ background: '#fff000' }}
+          component={Col}
+        >
+          执行动画
+        </Tween>
+      </ScrollOverPack>
+    </div>);
+}
+
+ReactDom.render(<Demo />, document.getElementById('__react-content'));

examples/simple.js

@@ -10,8 +10,9 @@ class Demo extends React.Component {
 
   render() {
     return (<Tween
-      animation={{ x: 300, duration: 100000 }}
+      animation={{ x: 300}}
       style={{ opacity: 1, height: 100, display: 'inline-block' }}
+      onChange={this.bbb}
     >
       <div>执行动效</div>
     </Tween>);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-tween-one",
-  "version": "2.2.21",
+  "version": "2.3.0",
   "description": "tween-one anim component for react",
   "keywords": [
     "react",

src/TweenOne.jsx

@@ -79,7 +79,7 @@ class TweenOne extends Component {
     if (typeof nextMoment === 'number' && nextMoment !== this.props.moment) {
       if (this.tween && !this.updateAnim) {
         this.startMoment = nextMoment;
-        this.startFrame = ticker.frame;
+        this.startTime = ticker.time;
         if (nextProps.paused) {
           this.raf();
         }
@@ -176,15 +176,15 @@ class TweenOne extends Component {
   setDefalut = (props) => {
     this.moment = props.moment || 0;
     this.startMoment = props.moment || 0;
-    this.startFrame = ticker.frame;
+    this.startTime = ticker.time;
   }
 
   restart = () => {
     if (!this.tween) {
       return;
     }
     this.startMoment = this.moment;
-    this.startFrame = ticker.frame;
+    this.startTime = ticker.time;
     this.tween.reverse = this.reverse;
     this.tween.reverseStartTime = this.startMoment;
     this.raf();
@@ -221,9 +221,9 @@ class TweenOne extends Component {
     let { repeat } = this.props;
     const totalTime = repeat === -1 ? Number.MAX_VALUE : this.tween.totalTime * (repeat + 1);
     repeat = repeat >= 0 ? repeat : Number.MAX_VALUE;
-    let moment = (ticker.frame - this.startFrame) * perFrame + this.startMoment;
+    let moment = ticker.time - this.startTime + this.startMoment;
     if (this.reverse) {
-      moment = (this.startMoment || 0) - (ticker.frame - this.startFrame) * perFrame;
+      moment = (this.startMoment || 0) - (ticker.time - this.startTime);
     }
     moment = moment > totalTime ? totalTime : moment;
     moment = moment <= 0 ? 0 : moment;

src/ticker.js

@@ -13,6 +13,9 @@ Ticker.prototype = {
   perFrame: Math.round(1000 / 60),
   elapsed: 0,
   lastUpdate: getTime(),
+  startTime: getTime(),// 开始时间，不计算 react 渲染时间；
+  nextTime: 0,
+  time: 0,
 };
 const p = Ticker.prototype;
 p.add = function (fn) {
@@ -40,12 +43,18 @@ p.sleep = function () {
 const ticker = new Ticker;
 p.tick = function (a) {
   ticker.elapsed = getTime() - ticker.lastUpdate;
+  // 离开当前时设值 300；大于 300 则为离开。
+  if (ticker.elapsed > 300) {
+    ticker.startTime += ticker.elapsed - ticker.perFrame;
+  }
   ticker.lastUpdate += ticker.elapsed;
-  if (!ticker.frame) {
+  ticker.time = ticker.lastUpdate - ticker.startTime;
+  const overlap = ticker.time - ticker.nextTime;
+  if(overlap > 0 || !ticker.frame) {
     ticker.frame++;
-  } else {
-    ticker.frame += Math.round(ticker.elapsed / ticker.perFrame);
+    ticker.nextTime += overlap;
   }
+  // console.log(ticker.frame, ticker.nextTime, ticker.time)
   ticker.tickFnArray.forEach(func => func(a));
   // 如果 object 里没对象了，自动杀掉；
   if (!ticker.tickFnArray.length) {
@@ -60,9 +69,9 @@ p.timeout = function (fn, time) {
     return console.warn('not function');// eslint-disable-line
   }
   const timeoutID = `timeout${Date.now()}-${timeoutIdNumber}`;
-  const startFrame = this.frame;
+  const startTime = this.time;
   this.wake(timeoutID, () => {
-    const moment = (this.frame - startFrame) * this.perFrame;
+    const moment = this.time - startTime;
     if (moment >= (time || 0)) {
       this.clear(timeoutID);
       fn();
@@ -78,11 +87,11 @@ p.interval = function (fn, time) {
     return null;
   }
   const intervalID = `interval${Date.now()}-${intervalIdNumber}`;
-  let starFrame = this.frame;
+  let starTime = this.time;
   this.wake(intervalID, () => {
-    const moment = (this.frame - starFrame) * this.perFrame;
+    const moment = this.time - starTime;
     if (moment >= (time || 0)) {
-      starFrame = this.frame;
+      starTime = this.time;
       fn();
     }
   });