bump 2.4.0, support object animation, export Tween;

Author: jljsj33

package.json

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

src/Tween.js

@@ -17,7 +17,7 @@ import {
 import easingTypes from './easing';
 import _plugin from './plugins';
 import StylePlugin from './plugin/StylePlugin';
-import { startConvertToEndUnit, transformOrFilter } from './util.js';
+import { startConvertToEndUnit, transformOrFilter, dataToArray } from './util.js';
 
 const DEFAULT_EASING = 'easeInOutQuad';
 const DEFAULT_DURATION = 450;
@@ -47,9 +47,10 @@ function defaultData(vars, now) {
   };
 }
 
-const Tween = function (target, toData, props) {
+const Tween = function (target, to, attr) {
+  const toData = dataToArray(to);
   this.target = target;
-  this.attr = props.attr || 'style';
+  this.attr = attr || 'style';
   // 时间精度补齐；
   this.accuracy = 0.00001;
   // 记录总时间;
@@ -80,12 +81,13 @@ const Tween = function (target, toData, props) {
 const p = Tween.prototype;
 p.setAttrIsStyle = function () {
   const data = [];
+  const defaultParam = defaultData({}, 0);
   this.data.forEach((d, i) => {
     const _d = { ...d };
     if (this.attr === 'style') {
       data[i] = {};
       Object.keys(_d).forEach(key => {
-        if (key in defaultData({}, 0)) {
+        if (key in defaultParam) {
           data[i][key] = _d[key];
           delete _d[key];
         }
@@ -102,7 +104,10 @@ p.setAttrIsStyle = function () {
           delete _d[key];
           this.startDefaultData.style = this.target.getAttribute('style') || '';
         } else {
-          this.startDefaultData[key] = this.target.getAttribute(key);
+          if (key in defaultParam) {
+            return;
+          }
+          this.startDefaultData[key] = this.getValue(key);
         }
       });
       data[i] = _d;
@@ -128,15 +133,15 @@ p.setDefaultData = function (_vars) {
         const _data = item[_key];
         if (_key in _plugin) {
           tweenData.vars[_key] = new _plugin[_key](this.target, _data, tweenData.type);
+        } else if ((_key === 'd' || _key === 'points') && 'SVGMorph' in _plugin) {
+          tweenData.vars[_key] = new _plugin.SVGMorph(this.target, _data, _key);
         } else if (_key.match(/color/i) || _key === 'stroke' || _key === 'fill') {
           tweenData.vars[_key] = { type: 'color', vars: parseColor(_data) };
         } else if (typeof _data === 'number' || _data.split(/[,|\s]/g).length <= 1) {
           const vars = parseFloat(_data);
           const unit = _data.toString().replace(/[^a-z|%]/g, '');
           const count = _data.toString().replace(/[^+|=|-]/g, '');
           tweenData.vars[_key] = { unit, vars, count };
-        } else if ((_key === 'd' || _key === 'points') && 'SVGMorph' in _plugin) {
-          tweenData.vars[_key] = new _plugin.SVGMorph(this.target, _data, _key);
         }
       }
     });
@@ -190,13 +195,13 @@ p.getAnimStartData = function (item) {
   const start = {};
   Object.keys(item).forEach(_key => {
     if (_key in _plugin || (this.attr === 'attr' && (_key === 'd' || _key === 'points'))) {
-      this.computedStyle = this.computedStyle || this.getComputedStyle();
+      this.computedStyle = this.computedStyle || (!this.target.getAttribute ? { ...this.target } : this.getComputedStyle());
       start[_key] = item[_key].getAnimStart(this.computedStyle, this.tween, this.isSvg);
       return;
     }
     if (this.attr === 'attr') {
       // 除了d和这points外的标签动画；
-      const attribute = this.target.getAttribute(_key);
+      const attribute = this.getValue(_key);
       let data = attribute === 'null' || !attribute ? 0 : attribute;
       if (_key.match(/color/i) || _key === 'stroke' || _key === 'fill') {
         data = !data && _key === 'stroke' ? 'rgba(255, 255, 255, 0)' : data;
@@ -236,7 +241,7 @@ p.setRatio = function (ratio, endData, i) {
       if (!endVars.type) {
         data = endVars.unit.charAt(1) === '=' ? startVars + endVars.vars * ratio + endVars.unit :
           (endVars.vars - startVars) * ratio + startVars + endVars.unit;
-        this.target.setAttribute(_key, data);
+        this.setValue(_key, endVars.unit ? data : parseFloat(data));
       } else if (endVars.type === 'color') {
         if (endVars.vars.length === 3 && startVars.length === 4) {
           endVars.vars[3] = 1;
@@ -245,12 +250,22 @@ p.setRatio = function (ratio, endData, i) {
           const startData = startVars[_i] || 0;
           return (_endData - startData) * ratio + startData;
         });
-        this.target.setAttribute(_key, getColor(data));
+        this.setValue(_key, getColor(data));
       }
     }
   });
   this.setAnimData(this.tween);
 };
+p.getValue = function (key) {
+  return this.target.getAttribute ? this.target.getAttribute(key) : this.target[key];
+}
+p.setValue = function (key, value) {
+  if (this.target.setAttribute) {
+    this.target.setAttribute(key, value);
+  } else {
+    this.target[key] = value;
+  }
+}
 p.render = function () {
   const reverse = this.reverse;
   this.defaultData.forEach((item, i) => {
@@ -389,6 +404,9 @@ p.frame = function (moment) {
   });
   this.render();
 };
+
+p.init = p.frame;
+
 p.resetAnimData = function () {
   this.tween = {};
   this.start = {};
@@ -441,9 +459,9 @@ p.resetDefaultStyle = function () {
         const value = getDefaultStyle(this.target.style.cssText,
           this.startDefaultData.style,
           this.data);
-        this.target.setAttribute(key, value);
+        this.setValue(key, value);
       } else {
-        this.target.setAttribute(key, this.startDefaultData[key]);
+        this.setValue(key, this.startDefaultData[key]);
       }
       this.computedStyle = null;
     }

src/TweenOne.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDom from 'react-dom';
 
-import { dataToArray, objectEqual } from './util';
+import { objectEqual } from './util';
 import Tween from './Tween';
 import ticker from './ticker';
 
@@ -174,7 +174,7 @@ class TweenOne extends Component {
     }
   }
 
-  setDefalut = (props) => {
+  setDefault = (props) => {
     this.moment = props.moment || 0;
     this.startMoment = props.moment || 0;
     this.startTime = ticker.time;
@@ -196,9 +196,9 @@ class TweenOne extends Component {
     this.updateAnim = false;
     const props = this.props;
     if (props.animation && Object.keys(props.animation).length) {
-      this.setDefalut(props);
-      this.tween = new Tween(this.dom, dataToArray(props.animation),
-        { attr: props.attr });
+      this.setDefault(props);
+      this.tween = new Tween(this.dom, props.animation,
+        props.attr);
       this.tween.reverse = this.reverse;
       // 预先注册 raf, 初始动画数值。
       this.raf();

src/index.js

@@ -1,5 +1,6 @@
 // export this package's api
 import TweenOne from './TweenOne';
+import _tween from './Tween';
 import group from './TweenOneGroup';
 import _easing from './easing';
 import _plugins from './plugins';
@@ -9,6 +10,7 @@ TweenOne.TweenOneGroup = group;
 TweenOne.easing = _easing;
 TweenOne.plugins = _plugins;
 TweenOne.ticker = _ticker;
+TweenOne.Tween = _tween
 
 export default TweenOne;
 
@@ -19,3 +21,5 @@ export const easing = _easing;
 export const plugins = _plugins;
 
 export const ticker = _ticker;
+
+export const Tween = _tween;

src/plugin/SvgMorphPlugin.jsx

@@ -28,7 +28,7 @@ p.polygonPoints = function (start, end) {
   return [startArray, endArray];
 };
 p.getAnimStart = function () {
-  this.start = this.target.getAttribute(this.key);
+  this.start = this.target.getAttribute ? this.target.getAttribute(this.key) : this.target[this.key];
   if (this.key === 'd') {
     this.pathArray = path2curve(this.start, this.vars);
   } else {
@@ -58,7 +58,11 @@ p.setRatio = function (ratio, tween) {
   let vars = ratio === 1 ? this.vars : tween[this.key].join(' ');
   vars = ratio === 0 ? this.start : vars;
   if (vars) {
-    this.target.setAttribute(this.key, vars);
+    if (this.target.setAttribute) {
+      this.target.setAttribute(this.key, vars);
+    } else {
+      this.target[this.key] = vars;
+    }
   }
 };
 export default SvgPlugin;

tests/index.tsx

@@ -5,6 +5,8 @@ import TweenOne from '../typings';
 const path = 'M0,100 C30,60 0,20 50,50 C70,70 60,0 100,0';
 const ease = TweenOne.easing.path(path, { rect: 100, lengthPixel: 200 });
 const Group = TweenOne.TweenOneGroup;
+const tween = new TweenOne.Tween({}, { x: 100 });
+tween.init();
 export default () => (
   <div>
     <TweenOne

tests/tweenOne.spec.jsx

@@ -6,7 +6,7 @@ import expect from 'expect.js';
 import TestUtils from 'react-dom/test-utils';
 import { checkStyleName } from 'style-utils';
 
-import Tween, { easing, plugins } from '../src';
+import TweenOne, { easing, plugins } from '../src';
 import ticker from '../src/ticker';
 import BezierPlugin from '../src/plugin/BezierPlugin';
 
@@ -42,7 +42,7 @@ describe('rc-tween-one', () => {
       render() {
         if (this.props.component === 'rect') {
           return (<svg>
-            <Tween
+            <TweenOne
               {...this.props}
               reverse={this.state.reverse}
               animation={this.state.animation} style={this.state.style}
@@ -53,7 +53,7 @@ describe('rc-tween-one', () => {
             />
           </svg>);
         }
-        return (<Tween {...this.props}
+        return (<TweenOne {...this.props}
           reverse={this.state.reverse}
           animation={this.state.animation}
           style={this.state.style}
@@ -62,7 +62,7 @@ describe('rc-tween-one', () => {
           paused={this.state.paused}
         >
           <span>demo</span>
-        </Tween>);
+        </TweenOne>);
       }
     }
     const objectOrArray = PropTypes.oneOfType([PropTypes.object,

typings/Tween.d.ts

@@ -0,0 +1,10 @@
+import { IAnimObject } from './AnimObject';
+
+export default class RcTweenOneGroup {
+  constructor(target: Object, animation: IAnimObject | IAnimObject[], attr?: 'style' | 'attr');
+  init: () => void;
+  frame: (moment?: Number) => void;
+  target: Object;
+  progressTime: Number;
+  totalTime: Number;
+}

typings/index.d.ts

@@ -5,6 +5,7 @@
 import * as React from 'react';
 
 import Group from './TweenOneGroup';
+import Tween from './Tween';
 import { IAnimObject, IEaseCallBack } from './AnimObject';
 
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
@@ -44,4 +45,6 @@ export default class RcTweenOne<T> extends React.Component<IProps<T>> {
     push(plugin: any): void;
   }
   static TweenOneGroup: typeof Group;
+
+  static Tween: typeof Tween;
 }