Animation: play() ã¡ã½ãã
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2020å¹´3æ.
play() 㯠ã¦ã§ãã¢ãã¡ã¼ã·ã§ã³ APIã® Animation ã¤ã³ã¿ã¼ãã§ã¤ã¹ã®ã¡ã½ããã§ãã¢ãã¡ã¼ã·ã§ã³ã®åçãéå§ã¾ãã¯åéãã¾ããã¢ãã¡ã¼ã·ã§ã³ãå®äºããå ´åãplay() ãå¼ã³åºãã¨ã¢ãã¡ã¼ã·ã§ã³ãåéããæåããåçãã¾ãã
æ§æ
play()
弿°
ãªãã
è¿å¤
ãªã (undefined)ã
ä¾
ã¢ãªã¹ã®æé·/縮å°ã²ã¼ã ã®ä¾ã§ã¯ãã±ã¼ããã¯ãªãã¯ã¾ãã¯ã¿ããããã¨ãã¢ãªã¹ã®æé·ã¢ãã¡ã¼ã·ã§ã³ (aliceChange) ãåçãããã±ã¼ãã®ã¢ãã¡ã¼ã·ã§ã³ãçºçããã¨åæã«ãã¢ãªã¹ã大ãããªãã¾ãã 2 ã¤ã® Animation.play()ã 1 ã¤ã® EventListener ã§ãã
// The cake has its own animation:
const nommingCake = document
.getElementById("eat-me_sprite")
.animate(
[{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
{
fill: "forwards",
easing: "steps(4, end)",
duration: aliceChange.effect.timing.duration / 2,
},
);
// Pause the cake's animation so it doesn't play immediately.
nommingCake.pause();
// This function will play when ever a user clicks or taps
const growAlice = () => {
// Play Alice's animation.
aliceChange.play();
// Play the cake's animation.
nommingCake.play();
};
// When a user holds their mouse down or taps, call growAlice to make all the animations play.
cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);
仿§æ¸
| Specification |
|---|
| Web Animations > # dom-animation-play > |
ãã©ã¦ã¶ã¼ã®äºææ§
é¢é£æ å ±
- ã¦ã§ãã¢ãã¡ã¼ã·ã§ã³ API
Animation: ã¦ã§ããã¼ã¸ã®ã¢ãã¡ã¼ã·ã§ã³ãå¶å¾¡ãããã¨ãã§ãããã®ä»ã®ã¡ã½ãããããããã£Animation.pause(): ã¢ãã¡ã¼ã·ã§ã³ã忢ãã¾ããAnimation.reverse(): ã¢ãã¡ã¼ã·ã§ã³ãéæ¹åã«åçãã¾ããAnimation.finish(): ã¢ãã¡ã¼ã·ã§ã³ãçµäºãã¾ããAnimation.cancel(): ã¢ãã¡ã¼ã·ã§ã³ããã£ã³ã»ã«ãã¾ãã