动画向量元素摇摆像SVG或画布摆？ [英] animate vector element to swing like a pendulum with SVG or Canvas?

问题描述

我有我想我的动画网页上的图像。

I have a image which i would like to animate on my web page.

目前我使用的是GIF。

Currently i am using a gif.

我想有它的动画，这js的LIB更多的控制/框架将是最好的帮助我呢？

I would like to have more control on its animation, which js lib/framework would be best to help me out?

我应该用帆布或SVG？
这（小）图书馆是最好用？

Should i use canvas or SVG? Which (small) library is best to use?

我碰巧知道一点 raphael.js
但我不知道如何得到这个效果做了。

I happen to know a little raphael.js But i am not sure how to get this effect done.

推荐答案

我已经做了SVG东西是接近你想要达到什么： http://live.echo-flow.com/stackoverflow/clock.svg

I've done something with SVG that's close to what you're trying to achieve: http://live.echo-flow.com/stackoverflow/clock.svg

在情况下，我曾经拿这个例子下来，这里的相关code。

In case I ever take the example down, here's the relevant code.

clock.svg：

clock.svg:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100">

<rect x="0" y="0" height="100" width="100" fill="none" stroke="blue" id="border"/>

<script type="text/ecmascript" xlink:href="clock.js"></script>

</svg>

clock.js：

clock.js:

var svgRoot = document.documentElement;
var svgNS = "http://www.w3.org/2000/svg";

var ident = svgRoot.createSVGMatrix();

function Pendulum(thetaZero,period,tempo,fillColor){

        //sensible default values
        thetaZero = thetaZero || 0;
        period = period || 20;
        tempo = tempo || 20;
        fillColor = fillColor || "red";

        if(fillColor == "randomize"){
                fillColor = "rgb(" + Math.random() * 254 +
                                "," + Math.random() * 254 +
                                "," + Math.random() * 254 + ")";
        }

        //construct his representation in DOM
        var g = document.createElementNS(svgNS,"g");
        g.setAttributeNS(null,"transform","translate(50,20) rotate(" + thetaZero + ")");

        var rotateTransform = g.transform.baseVal.getItem(1);

        var path = document.createElementNS(svgNS,"line");
        path.setAttributeNS(null,"x1",0);
        path.setAttributeNS(null,"y1",0);
        path.setAttributeNS(null,"x2",0);
        path.setAttributeNS(null,"y2",40);
        path.setAttributeNS(null,"stroke","black");

        var c = document.createElementNS(svgNS,"circle");
        var styleString = "fill:" +fillColor;
        //console.log(styleString);
        c.setAttributeNS(null,"cx",0);
        c.setAttributeNS(null,"cy",50);
        c.setAttributeNS(null,"r",10);
        c.setAttributeNS(null,"style",styleString);
        c.setAttributeNS(null,"stroke","black");
        c.setAttributeNS(null,"opacity",.5);
        g.appendChild(path);
        g.appendChild(c);

        svgRoot.appendChild(g);

        this.node=g;

        //timeout

        var timeStep = 10; //in milliseconds
        var timeCount = 0;
        var _animateTimeStep = function(){
                timeCount++;

                var adjustedTimeCount = timeCount/tempo;

                //compute theta
                //theta(t) = period * sin(t + thetaZero)
                var theta = period * Math.sin(adjustedTimeCount  + thetaZero);

                //set his current rotate transformation to the new theta
                rotateTransform.setMatrix(ident.rotate(theta));
        }

        var timerId = null;

        //method definitions
        this.go=function(){
                timerId = window.setInterval(_animateTimeStep,timeStep);
        };

        this.stop=function(){
                window.clearInterval(timerId);
        };
}


//Pendulum(thetaZero,period,tempo,fillColor)
var p1 = new Pendulum(-10,20,40,"red");
p1.go();

var p2 = new Pendulum(20,20,40,"yellow");
p2.go();

var p3 = new Pendulum(-20,20,40,"blue");
p3.go();

var p4 = new Pendulum(10,20,40,"purple");
p4.go();

这篇关于动画向量元素摇摆像SVG或画布摆？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！