keyTimes

ยซ SVG Attribute reference home

keyTimes ์†์„ฑ์€ ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ pacing์„ ์ œ์–ดํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ์„ธ๋ฏธ์ฝœ๋ก ์œผ๋กœ ๊ตฌ๋ถ„ ๋œ ์‹œ๊ฐ„ ๊ฐ’ ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค. ๋ชฉ๋ก์˜ ๊ฐ ์‹œ๊ฐ„์€ values ์†์„ฑ ๋ชฉ๋ก์˜ ๊ฐ’์— ํ•ด๋‹นํ•˜๋ฉฐ ์• ๋‹ˆ๋ฉ”์ด์…˜์—์„œ ๊ฐ’์ด ์‚ฌ์šฉ๋˜๋Š” ์‹œ๊ธฐ๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. keyTimes ๋ชฉ๋ก์˜ ๊ฐ ์‹œ๊ฐ„ ๊ฐ’์€ 0๊ณผ 1 ์‚ฌ์ด์˜ ๋ถ€๋™ ์†Œ์ˆ˜์  ๊ฐ’์œผ๋กœ ์ง€์ •๋˜๋ฉฐ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์š”์†Œ์˜ ์ง€์† ์‹œ๊ฐ„์— ๋Œ€ํ•œ ๋น„๋ก€ ์˜คํ”„์…‹์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. 

๋งŒ์•ฝ keyTimes ๋ชฉ๋ก์ด ์ง€์ •๋  ๊ฒฝ์šฐ,  values ๋ชฉ๋ก์—์„œ์™€ ๊ฐ™์ด keyTimes ๋ชฉ๋ก์— ์žˆ๋Š” ๊ฐ’๊ณผ ์ •ํ™•ํ•˜๊ฒŒ ์ผ์น˜ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

๊ฐ ์—ฐ์†์ ์ธ ์‹œ๊ฐ„ ๊ฐ’์€ ์ด์ „ ์‹œ๊ฐ„ ๊ฐ’๋ณด๋‹ค ํฌ๊ฑฐ๋‚˜ ๊ฐ™์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.

keyTimes ๋ชฉ๋ก์˜ semantics๋Š” interpolation ๋ชจ๋“œ์— ๋”ฐ๋ผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

  • For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be 1. The key time associated with each value defines when the value is set; values are interpolated between the key times.
  • For discrete animation, the first time value in the list must be 0. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined in keyTimes.

If the interpolation mode is paced, the keyTimes attribute is ignored.

If the duration is indefinite, any keyTimes specification will be ignored.

Usage context

Categories Animation value attribute
Value <list>
Animatable No
Normative document SVG 1.1 (2nd Edition)

์˜ˆ์ œ

<?xml version="1.0"?>
<svg width="120" height="120"
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <circle cx="60" cy="10" r="10">

        <animate attributeName="cx"
                 attributeType="XML"
                 dur="4s"
                 values="60 ; 110 ; 60 ; 10 ; 60"
                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
                 repeatCount="indefinite"/>

        <animate attributeName="cy"
                 attributeType="XML"
                 dur="4s"
                 values="10 ; 60 ; 110 ; 60 ; 10 "
                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
                 repeatCount="indefinite"/>

    </circle>
</svg>

Live sample

Elements

The following elements can use the keyTimes attribute