Question

我正在寻找一种使用angularjs实现this answer的确切功能的方法：具体来说，一个框（div）可以在屏幕上随机移动，同时进行动画制作。目前我已经尝试了

myApp.directive("ngSlider", function($window) {
  return {
    link: function(scope, element, attrs){
        var animateDiv = function(newq) {
            var oldRect = element.getBoundingClientRect();
            var oldq = [oldRect.top, oldRect.left];
            if (oldq != newq){
                var dir = calcDir([oldq.top, oldq.left], newq);
                element.moveTo(oldq.left + dir[0], oldq.top + dir[1]);
                setTimeout(animateDiv(newq), 100);
            }
        };

        var makeNewPosition = function() {
            // Get viewport dimensions (remove the dimension of the div)
            var window = angular.element($window);
            var h = window.height() - 50;
            var w = window.width() - 50;

            var nh = Math.floor(Math.random() * h);
            var nw = Math.floor(Math.random() * w);

            return [nh,nw];

        };


        function calcDir(prev, next) {
            var x = prev[1] - next[1];
            var y = prev[0] - next[0];
            var norm = Math.sqrt(x * x + y * y);
            return [x/norm, y/norm];
        }
        var newq = makeNewPosition();
        animateDiv(newq);
    }
  };
});

从角度来看，这似乎有点不对劲。任何帮助表示赞赏。

Answer 1

我喜欢在这种情况下利用CSS。

绝对定位你的div
使用ng-style将top和left属性绑定到某个范围内变量
随机更改此范围内变量的top和left属性
使用top和left属性上的CSS转换为您设置动画

我做了plnkr！访问肯塔基州！

使用angularjs将框移动到随机位置

1 个答案: