Merge pull request #47 from react-component/child-context-style

Child context style

Author: jljsj33

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'));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-tween-one",
-  "version": "2.2.22",
+  "version": "2.3.0",
   "description": "tween-one anim component for react",
   "keywords": [
     "react",
@@ -67,15 +67,16 @@
   },
   "devDependencies": {
     "@types/react": "^16.0.0",
+    "antd": "^3.12.1",
     "core-js": "^2.5.7",
     "expect.js": "0.3.x",
     "precommit-hook": "^3.0.0",
+    "rc-queue-anim": "^1.6.1",
+    "rc-scroll-anim": "2.x",
     "rc-test": "6.x",
     "rc-tools": "8.x",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
-    "rc-queue-anim": "^1.6.1",
-    "rc-scroll-anim": "2.x",
     "tslint-config-prettier": "^1.17.0",
     "tslint-react": "^3.6.0",
     "typescript": "3.x"

src/Tween.js

@@ -8,7 +8,10 @@ import {
   toFixed,
   stylesToCss,
   createMatrix,
+  getGsapType,
+  isTransform,
   checkStyleName,
+  toCssLowerCase,
 } from 'style-utils';
 
 import easingTypes from './easing';
@@ -88,7 +91,7 @@ p.setAttrIsStyle = function () {
         }
       });
       data[i].style = _d;
-      this.startDefaultData.style = this.target.getAttribute('style');
+      this.startDefaultData.style = this.target.getAttribute('style') || '';
     } else if (this.attr === 'attr') {
       Object.keys(_d).forEach(key => {
         if (key === 'style' && Array.isArray(d[key])) {
@@ -97,7 +100,7 @@ p.setAttrIsStyle = function () {
         if (key === 'bezier') {
           _d.style = { ..._d.style, bezier: _d[key] };
           delete _d[key];
-          this.startDefaultData.style = this.target.getAttribute('style');
+          this.startDefaultData.style = this.target.getAttribute('style') || '';
         } else {
           this.startDefaultData[key] = this.target.getAttribute(key);
         }
@@ -391,24 +394,67 @@ p.resetAnimData = function () {
   this.start = {};
 };
 
+const getDefaultStyle = function (domStyle, defaultStyle, tweenData) {
+  const $data = defaultData({}, 0);
+  const getStyleToArray = (styleString) => (
+    styleString.split(';').filter(c => c).map(str =>
+      str.split(':').map(s => s.trim())
+    )
+  );
+  const styleToArray = getStyleToArray(defaultStyle);
+  let domStyleToArray = getStyleToArray(domStyle);
+  tweenData.forEach(value => {
+    Object.keys(value).forEach(name => {
+      if (!(name in $data)) {
+        const styleName = toCssLowerCase(isTransform(getGsapType(name)));
+        domStyleToArray = domStyleToArray.filter(item => {
+          if (item[0].match(/transform|filter/ig) && styleName.match(/transform|filter/ig)) {
+            return false;
+          }
+          return item[0] !== styleName;
+        });
+      }
+    })
+  });
+  styleToArray.forEach(item => {
+    domStyleToArray = domStyleToArray.map($item => {
+      if ($item[0] === item[0]) {
+        return item;
+      }
+      return $item;
+    });
+  })
+  return domStyleToArray.map(item => item.join(':')).join(';');
+}
+
 p.resetDefaultStyle = function () {
   this.tween = {};
   this.defaultData = this.defaultData.map(item => {
     item.reset = true;
     delete item.mode;
     return item;
   });
+  const data = defaultData({}, 0);
   Object.keys(this.startDefaultData).forEach(key => {
-    if (!(key in defaultData({}, 0))) {
-      this.target.setAttribute(key, this.startDefaultData[key]);
+    if (!(key in data)) {
+      if (key === 'style') {
+        const value = getDefaultStyle(this.target.style.cssText,
+          this.startDefaultData.style,
+          this.data);
+        this.target.setAttribute(key, value);
+      } else {
+        this.target.setAttribute(key, this.startDefaultData[key]);
+      }
       this.computedStyle = null;
     }
   });
 };
 
 p.reStart = function (style) {
   this.start = {};
-  this.target.style.cssText = '';
+  this.target.style.cssText = getDefaultStyle(this.target.style.cssText,
+    this.startDefaultData.style,
+    this.data);
   Object.keys(style || {}).forEach(key => {
     this.target.style[key] = stylesToCss(key, style[key]);
   });

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();
     }
   });