标签: tweenmax

我想知道是否有人可以提供一些有关如何处理React.js中的离开动画的见解.我一直在使用Greensock TweenMax并且输入动画可以正常工作componentDidMount,但我还没有找到一种可靠的方法来为组件设置动画.

我的感觉是它应该进入componentWillUnmount,但是React没有提供回调机制来指示你何时准备好放弃一个组件.因此,转换动画永远不会完成,因为动画与React是异步的.相反,你看到动画的一小部分时间,组件消失,并被动画中的下一个组件取代.

自从我9个月前开始使用React以来,这是一个我一直在努力解决的问题.我不禁想到除了ReactCSSTransitionGroup我发现那些麻烦和挑剔的东西之外必须有一个解决方案,特别是使用react-router.

我遇到一个问题是使用jquery.animate()和GreenSock TweenMax动画引擎的缺点和优点.所以也许有人知道它.网络上没有足够的信息,也有关于性能的信息.

我试图同时使用jquery.animate()和tweenMax,但在某些情况下我更喜欢在其他GreenSock中使用jQuery引擎.

我试图决定哪个更好,而不是从一个跳到另一个.

在将来感谢,知道使用哪个是非常有趣的.

引擎:

http://jquery.com

https://www.greensock.com/gsap-js/

我试图像这样实现mouseOver效果.

我能够根据它们的位置生成每个瓷砖所需的css3d矩阵.

我已经通过慢速鼠标移动实现了这种效果,但是如果我从一个瓷砖快速移动到另一个瓷砖,则它不能正常更新.它在瓷砖之间显示出差距.在鼠标悬停时更新所有tile/tile坐标的最佳方法是什么,以便获得一致的效果？

这是我的js代码:

 $('.box').each(function() {
            $(this).css('height', '284px');
            $(this).css('width', '284px');
        });

        generateGrid = function(w, h) {
            var t = this;
            this.p = [];
            var d = 30;


            var c = Math.floor($('.w').outerWidth() / 284 + 1);
            var r = Math.ceil($('.w').outerHeight() / 284) + 1;
            var vc = c * r;
            for (i = 0; i < vc; i++) {
                var l = {
                    x: Math.floor(i % c) * 284,
                    y: Math.floor(i / c) * 284
                };
                this.p.push(l);
            }
            var m = …

的的性能提升使用GreenSock动画引擎是相当显着的.

这个图书馆为实现这些收益而制定了什么基础架构决策和权衡取舍？特别是,这个引擎与jQuery动画有什么不同？

我有以下GASP动画:

$(function () {
    var tmax_options = {
      repeat: -1
    };

    var tmax_tl = new TimelineMax(tmax_options),
      tween_options_to = {
        css: {
          rotation: 360,
          transformOrigin: 'center center'
        },
        ease: Cubic.Linear,
        force3D: true
    };

// Last Argument is Position Timing.
// Use this argument to stagger the visibility of surrounding circles
tmax_tl.to($('svg > path'), 10, tween_options_to, 0)
  .to($('svg > #XMLID_26_'), 5, tween_options_to, 0)
  .to($('svg > #XMLID_23_'), 70, tween_options_to, 0)
  .to($('svg > #XMLID_20_'), 65, tween_options_to, 0);
});

骗子在这里

现在我想在上面的动画中发生的是最外面的多边形应该旋转(总共找到它们).所有4应以不同的速度旋转,并应连续旋转而不停止.

截至目前,我的动画代码如下所示:

tmax_tl.to($('svg > path'), …

我有一组控制点代表一个高阶贝塞尔曲线.
如何使用单个SVG路径绘制此曲线？

UPD:
例如,我有一组点:(x1,y1)(x2,y2)(x3,y3)(x4,y4)(x5,y5).
如何SVG-路径看起来像的条款C,S,Q或T？

UPD 2:解决方案
我问这个问题描绘了一个用TweenMax动画的对象路径.
后来我收到了GreenSock论坛的回复.
这是CodePen示例.

I've created a page on Codepen to be later added to my Ruby on Rails app ( https://codepen.io/salman15/pen/evQVLV ), where all the code works fine.

After creating the page I tried adding the page to my Ruby on Rails app with spree (which is running on Cloud 9 https://consulegem-salman15.c9users.io/ "server might not be offline at the time that you read this"). I've done this in the following manner:

Step 1: Added the html code to the index.html.erb

Step …

我正试图animation点击预期如下的方框

1. 单击框时,它必须向右移动到300px或最右边,然后它应该到底部.

注意:如果是使用tweenMax (GSAP).然后解决方案最受欢迎.

如图所示:

这是codepen:https ://codepen.io/anon/pen/ajXqLL

$(function(){
  $('.box').on('click',function(){
      $('#wrapper').append(this);
      $(this).addClass('elementToAnimate');
   });
});

		div.box{
		  height: 100px;
		  width: 200px;
		  background:red;
		  display: inline-block;
		  text-align:center;
		  color:#fff;
		  font-size:26px;
		  margin: 0px;
		  float: left;
		}
		div.box:active{
		  background:yellow;
		}
		div.box2{
		  background:green;
		}
		div.box3{
		  background:orange;
		}


     
@keyframes yourAnimation{
    0%{
        transform: translateX(100px) translateY(20%);
        }
    40%{
        transform: rotate(xx) translateX(120px) translateY(40%);
        }

     60%{
        transform: rotate(xx) translateX(150px) translateY(50%);
        }

      80%{
        transform: rotate(xx) translateX(200px) translateY(90%);
        }

}

.elementToAnimate{
    animation: yourAnimation 3s forwards 0s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> …

Codepen

http://codepen.io/tconroy/pen/RPzxgz

基本设置:

我正在尝试创建一个在中心容器内部有2列结构的页面,最大宽度为1600px.

左列包含页面内容.右列包含广告单元(例如,640x480像素宽).

在768px或更低的介质断点处,2列应该堆叠(以便内容位于顶部,广告位于其下方).

问题

当页面加载时,应该有一个400x400px画布元素,在屏幕中央包含一个白色圆圈(绝对中心 - 垂直和水平).

圆圈动画到左栏内容正后方的位置.

在此之后,圆圈应"展开"以填充整个用户的视口,而不会覆盖内容或导致滚动条出现.

如下面的小提琴所示,我已经获得了初始的圆/运动动画,但是我遇到了试图弄清楚扩展部分的问题.我需要圆圈显示增长/展开,直到它覆盖整个视口,但不应遮挡所有文本内容/广告单元,并且动画不应显示任何滚动条.

我对帆布非常不熟悉,所以如果有人能在没有打破初始动画的情况下给我一只手,我将非常感激.:)

http://codepen.io/tconroy/pen/RPzxgz

HTML:

<div class="container">
  <div class="navigation row">
    <h1 style="float:right;"><a href="#">Continue</a></h1>
  </div>
  <div class="content row">
    <div class="circle-wrap">

      <canvas class="circle" width="400" height="400"></canvas>

      <div class="template-output">
        <h1 class="title">
              <span class="upper">Title TopLine</span>
              <span class="lower">Title Bottom</span>
            </h1>
        <div class="body">
          <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum distinctio nesciunt nostrum magni neque. Iusto et delectus iure distinctio cupiditate, a sint doloremque ratione saepe sunt quisquam assumenda, eaque velit?</p> …

在我的应用程序中,我正在尝试使用GSAP的TweenMax/TimelineMax库来动画更改,但我在代码中遇到了早期错误.简化(这是使用ES6的React/Redux应用程序):

import TimelineMax from 'gsap';
import TweenMax from 'gsap';
import GSAP from 'gsap-react-plugin';
import ReactDOM from 'react-dom';

someFunction() {
    var mailboxDropdown = ReactDOM.findDOMNode( this.refs.mailboxDropdown );
    // TweenLite.to(this, 0.1, { "y-offset": '-50px', 'opacity' : 0 });
    console.log(mailboxDropdown)
    var tl = new TimelineMax();
    console.log('here');
    tl.to(mailboxDropdown, 0.4, { "y-offset": '-50px' }, 'slideUp' )
    tl.to(mailboxDropdown, 1, { opacity: 0 }, 'slideUp-=.5');
};

这些错误很奇怪.首先,如果我没有用一个对象初始化TimelineMax - 类似于new TimelineMax({repeat: 1})- (虽然文档说它的默认构造函数是arg null),它甚至在击中之前就会抛出一个错误console.log('here').

未捕获无法补间空目标.

如果我这样做有一个对象作为前一句初始化它,我打了一个错误,当我尝试调用tl.to.特别: …