関数内の単一の値をアニメーション化する
-
13-12-2019 - |
質問
HTML5で作成した図形をアニメーション化しようとしています。
myShape.drawFunc = function(){
var context = this.getContext();
context.beginPath();
context.arc(480, 480, animationValue, startingPoint * Math.PI, endingPoint * Math.PI, false);
context.lineTo(480,480);
context.closePath();
this.fillStroke();
}
jQuery.animateを使用して変更したい animationValue
時間の経過とともに、ある値から別の値に変化します。これを実現する方法がよくわかりません。また、アニメーションのすべてのステップで関数を実行する必要があります Layer.draw();
私の形はキャンバスの形だからです。
アニメーション化する方法を知っている人はいます animationValue
myShape.drawFunc にありますか?
内でアニメーション化しようとしていることを付け加えておきます。 myShape.on("mouseover",{});
これはsetIntervalメソッドなどを使用する際に問題を引き起こしますか?
アップデート:
segment.on("mouseover",function(){
var startingPoint = segData[index].startingPoint;
var endingPoint = segData[index].endingPoint;
var startingRadias = segData[index].radias;
var maxRadias = 250;
var updateRadias = startingRadias;
setInterval(function(){
if(updateRadias < maxRadias){
updateRadias++;
console.log("frame : "+updateRadias);
this.drawFunc = function(){
var context = this.getContext();
context.beginPath();
context.arc(480, 480, updateRadias, startingPoint * Math.PI, endingPoint * Math.PI, false);
context.lineTo(480,480);
context.closePath();
this.fillStroke();
}
rawLayer.draw();
}
},1000/30);
});
console.log には、setInterval が呼び出されていることが示されていますが、形状は再描画されていないようです。
解決
はい、使用できます animate()
あなたを変えるために animationValue
ある値から別の値への時間の経過:
var drawFunc = function (animationValue) {
var context = $("#myCanvas")[0].getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(animationValue, animationValue, 150, 75);
},
from = 0, to = 50;
// now animate using the jQuery.animate()
$({ n: from }).animate({ n: to}, {
duration: 1000,
step: function(now, fx) {
drawFunc(now);
}
});
この場合、1 秒間に 0 から 50 までアニメーション化しています。
これは実際に使用するアニメーション コードではありませんが、コツを掴む必要があります。 デモはこちら
詳細については、 変数のアニメーション化
他のヒント
var FPS = 30;
setInterval(function() {
update();
draw();
}, 1000/FPS);
所属していません StackOverflow