angular js 中的动画检查元素是否正在补间 greensock

Question

我只是想知道有没有更好的方法来做到这一点？我正在尝试找到一种方法来检查动画是否在元素上运行如果它忽略了导致动画的单击命令，因此没有重复的元素显示或重复动画。这是它正在运行的代码我使用工厂来存储动画变量，如果变量为真，它不会启动新动画。

index.html

<!DOCTYPE html>
<html lang="en" ng-app="Animate">
<head>
    <meta charset="UTF-8" />
    <title>Js animation</title>
    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/angular-animate/angular-animate.min.js"></script>
    <script src="lib/greensock/src/minified/TweenMax.min.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap-theme.min.css" />
    <script src="js/jsanim.js"></script>
</head>
<body ng-controller="AppCtrl as app">
    <div class="container">
        <div class="row-fluid">
            <div class="jumbotron">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam natus ipsa libero nisi labore ad pariatur consequatur quasi sint modi porro saepe, cupiditate sed asperiores ullam laudantium sit dolorem. Animi.
                <div class="btn btn-warning" ng-click="app.toggleIt()">click to toggle</div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, dolore. Nam reiciendis consequuntur vero assumenda facere illum non modi vitae in et perferendis labore pariatur, sed, obcaecati nisi dignissimos quae?</div>
            <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, dolore. Nam reiciendis consequuntur vero assumenda facere illum non modi vitae in et perferendis labore pariatur, sed, obcaecati nisi dignissimos quae?</div>
        </div>
        <div class="row-fluid">
            <div class="toggle" ng-if="app.toggle">
                toggle this
            </div>  
        </div>
    </div>
</body>
</html>

这是我的 jsanim 文件。

var app = angular.module("Animate", ['ngAnimate']);

app.factory("Settings", function(){

    var settings = {};
    settings.animating = false;
    return settings;

})

app.controller("AppCtrl", ["$animate", "$scope", "$http", "Settings", function AppCtrl($animate, $scope, $http, Settings){

    var appCtrl = this;

    appCtrl.toggle = true;

    appCtrl.toggleIt = function(){

        // console.log(Settings.animating, "Settings.animating");

        if(!Settings.animating){

            appCtrl.toggle = !appCtrl.toggle;
            console.log(appCtrl.toggle);

        }

    }

}])

app.animation(".toggle", function(Settings){

    return {

        leave:function(element, done){

            Settings.animating = true;
            TweenMax.to(element, 1, {opacity:0, onComplete:done});

            return function(onDone){

                Settings.animating = false;

            }

        },
        enter:function(element, done){

            Settings.animating = true;
            TweenMax.from(element, 1, {opacity:0, onComplete:done});

            return function(onDone){

                Settings.animating = false;

            }
        }

    }

})

Answer 1

GSAP 有一个名为 isActive()

的方法

http://greensock.com/docs/#/HTML5/GSAP/TweenLite/isActive/

您可以通过检查 isActive() 的条件来使用它

 if(!tween.isActive()){
        //only do something if the tween is not active
 }

GreenSock 使用它的例子：

http://codepen.io/GreenSock/pen/Pwzomo

基本上 isActive() 指示动画当前是否处于活动状态（意味着虚拟播放头正在主动移动穿过此实例的时间跨度并且它没有暂停，它的任何祖先时间线也没有暂停）。

Answer 2

您可以通过 TweenMax.

等多种方式完成此操作

isActive()（如前所述 @Jonathan Marzullo） [Documentation].
TweenMax.getTweensOf() 和 TweenMax.getAllTweens() [Documentation].
TweenMax.isTweening() [Documention].

所以理论上，它可以像下面这样简单而不必依赖外部布尔变量：

if (!TweenMax.isTweening(element)) TweenMax.to(element, duration,{prop:value});

希望对您有所帮助。

angular js 中的动画检查元素是否正在补间 greensock

Animations in angular js check if an element is being tweened greenscok

javascript

angularjs

animation

gsap