구글 AMP – 애니메이션 - 구글 블로그 AMP

Amp-animation은 다른 amp 구성 요소에서 사용할 애니메이션을 정의하는 amp 구성 요소입니다. 이 글에서는 이에 대해 자세히 설명합니다.

Amp-animation을 사용하려면 다음 스크립트를 추가해야 합니다.

<script async custom-element="amp-animation" 
src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

애니메이션의 세부 사항은 json 구조 내에 정의됩니다.

Amp-animation의 기본 구조는 다음과 같습니다.

<amp-animation layout="nodisplay">
<script type="application/json">
{
  // Timing properties
  ...
  "animations": [
    {
      // animation 1
    },
    ...
    {
      // animation n
    }
  ]
}
</script>
</amp-animation>

애니메이션 구성 요소는 선택자(Selectors), 변수(Variables), 타이밍 속성(Timing Properties), 키프레임(Keyframes) 등으로 구성됩니다.

{
  "selector": "#target-id",
  // Variables
  // Timing properties
  // Subtargets
  ...
  "keyframes": []
}

Selector

여기에서 애니메이션이 사용될 요소의 클래스 또는 ID를 제공해야 합니다.

Variables

키프레임 내에서 사용되도록 정의된 값입니다. 변수는 var()를 사용하여 정의됩니다

예제

{
  "--delay": "0.5s",
  "animations": [
    {
 
      "selector": "#target1",
      "delay": "var(--delay)",
      "--x": "150px",
      "--y" : "200px",
      "keyframes": {"transform": "translate(var(--x), var(--y, 0px)"}
    }
  ]
}

여기서 delay, x 및 y는 변수이고 변수 값은 표시된 예제에서 정의됩니다.

Timing 속성

여기에서 애니메이션의 지속 시간과 지연을 정의할 수 있습니다. 다음은 지원되는 타이밍 속성입니다.

속성	값	설명
duration	ms 초 단위	애니메이션에 사용되는 시간입니다.
delay	ms 초 단위	애니메이션이 실행되기 전에 지연됩니다.
endDelay	ms 초 단위	애니메이션이 완료될 때 적용되는 지연입니다.
iterations	숫자	애니메이션이 반복되어야하는 횟수입니다.
iterationStart	숫자	효과가 애니메이션을 시작하는 시간 오프셋입니다.
easing	문자열	애니메이션에 여유 효과를 가져오는데 사용됩니다. easing의 예는 linear, ease, ease-in, ease-out , ease-in-out 등입니다.
direction	문자열	"normal", "reverse", "alternate" 또는 "alternate-reverse" 중 하나입니다.
fill	문자열	"none", "forwards", "backwards", "both", "auto"가 값이 될 수 있습니다.

Keyframes

키프레임은 객체 형태 또는 배열 형태와 같은 다양한 방식으로 정의할 수 있습니다. 다음 예를 고려하십시오.

예제

"keyframes": {"transform": "translate(100px,200px)"}

예제

{
  "keyframes": {
    "opacity": [1, 0],
    "transform": ["scale(1)", "scale(2)"]
  }
}

예제

{
  "keyframes": [
    {"opacity": 1, "transform": "scale(1)"},
    {"opacity": 0, "transform": "scale(2)"}
  ]
}

예제

{
  "keyframes": [
    {"easing": "ease-out", "opacity": 1, "transform": "scale(1)"},
    {"opacity": 0, "transform": "scale(2)"}
  ]
}

CSS를 사용한 키프레임

<style amp-custom>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    margin: 0 auto;
    transform:scale(3);
  }
  @keyframes example { 0% {transform:scale(3)}
    75% {transform:scale(2)}
    100% {transform:scale(1)}
  }
</style>
<amp-animation layout="nodisplay">
<script type="application/json">
  {
    "duration": "4s",
    "keyframes": "example"
}
</script>
</amp-animation>

키프레임 내에서 사용할 수 있는 몇 가지 CSS 속성이 있습니다. 지원되는 속성을 화이트리스트 속성이라고합니다. 다음은 키프레임 내에서 사용할 수 있는 화이트리스트 속성입니다.

opacity
transform
visibility
'offsetDistance'

참고:
위에 나열된 속성 외에 다른 속성을 사용하면 콘솔에서 오류가 발생합니다.

이제 애니메이션이 적용될 때 이미지를 회전시키는 간단한 예제를 통해 이해하겠습니다. 이 예에서는 amp-animation을 사용하여 이미지를 회전합니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Animation</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-animation.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
  <style amp-custom>
  
    amp-img {
      border: 1px solid black;
      border-radius: 4px;
      padding: 5px;
    }
    
  </style>
</head>
<body>
<h3>Google AMP - Amp Animation Example</h3>
<amp-animation id="anim1" layout="nodisplay" trigger="visibility">
<script type="application/json">
  {
    "duration": "1s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#image1",
        "easing": "cubic-bezier(0,0,.21,1)",
        "keyframes": {
          "transform": "rotate(20deg)"
        }
      }
    ]
  }
</script>
</amp-animation>
<br/>
<br/>
<amp-img id="image1"
         src="images/christmas1.jpg"
         width="300"
         height="250"
         layout="responsive">
</amp-img>
<br/>
</body>
</html>

결과

위에서 사용된 amp-animation 세부 정보는 아래 코드에 나와 있습니다.

<script type="application/json">
  {
    "duration": "1s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#image1",
        "easing": "cubic-bezier(0,0,.21,1)",
        "keyframes": {
          "transform": "rotate(20deg)"
        }
      }
    ]
  }
</script>
</amp-animation>

여기서 Seletor는 회전 애니메이션이 적용되는 이미지의 ID입니다.

<amp-img id="image1"
         src="images/christmas1.jpg"
         width="300"
         height="250"
         layout="responsive">
</amp-img>

CSS에서 키프레임을 사용하는 예

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Animation</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-animation.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
  <style amp-custom>
  
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      margin: 0 auto;
      transform:scale(3);
    }

    @keyframes example {
      0% {transform:scale(3)}
      75% {transform:scale(2)}
      100% {transform:scale(1)}
    }
    
  </style>
</head>
<body>
<h3>Google AMP - Amp Animation Example</h3>
<amp-animation id="anim1" layout="nodisplay" trigger="visibility">
<script type="application/json">
  {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#image1",
        "easing": "cubic-bezier(0,0,.21,1)",
        "keyframes":"example"
      }
    ]
  }
</script>
</amp-animation>
<br/>
<br/>
<div id="image1"></div>
<br/>
</body>
</html>

결과

Animation Trigger

trigger="visibility"를 사용하면 애니메이션이 기본적으로 적용됩니다. 이벤트에서 애니메이션을 시작하려면 아래 예와 같이 trigger="visibility"를 제거하고 이벤트를 추가하여 애니메이션을 시작해야 합니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Animation</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-animation.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
  <style amp-custom>
  
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      margin: 0 auto;
      transform:scale(3);
    }

    @keyframes example {
      0% {transform:scale(3)}
      75% {transform:scale(2)}
      100% {transform:scale(1)}
    }
    
    button {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: left;
    }
    
  </style>
</head>
<body>
<h3>Google AMP - Amp Animation Example</h3>
<amp-animation id="anim1" layout="nodisplay">
<script type="application/json">
  {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#image1",
        "easing": "cubic-bezier(0,0,.21,1)",
        "keyframes":"example"
      }
    ]
  }
</script>
</amp-animation>
<button on="tap:anim1.start">Start</button>
<br/>
<br/>
<div id="image1"></div>
</body>
</html>

시작 버튼을 누르면 애니메이션이 시작됩니다.

결과

애니메이션을 시작하기 위해 start와 on이라는 액션을 사용했습니다. 마찬가지로 다음과 같은 다른 action이 지원됩니다.

start
pause
restart
resume
togglePause
seekTo
reverse
finish
cancel

액션을 사용할 수 있는 실제 예제를 보겠습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Animation</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-animation.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
  <style amp-custom>
  
    #image1 {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
      margin: 0 auto;
      transform:scale(2);
    }

    @keyframes example {
      0% {transform:scale(2)}
      75% {transform:scale(1)}
      100% {transform:scale(0.5)}
    }

    button1 {
      background-color: #ACAD5C;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: left;
    }
    
  </style>
</head>
<body>
<h3>Google AMP - Amp Animation Example</h3>
<amp-animation id="anim1" layout="nodisplay">
<script type="application/json">
  {
    "duration": "3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#image1",
        "easing": "cubic-bezier(0,0,.21,1)",
        "keyframes":"example"
      }
    ]
  }
</script>
</amp-animation>
<button on="tap:anim1.start">Start</button>
<button on="tap:anim1.pause">Pause</button>
<button on="tap:anim1.resume">Resume</button>
<button on="tap:anim1.reverse">Reverse</button>
<button on="tap:anim1.cancel">cancel</button>
<button on="tap:anim1.finish">finish</button>
<button on="tap:anim1.togglePause">togglePause</button>
<button on="tap:anim1.seekTo(percent=1.00)">seekTo(100%)</button>
<br/>
<br/>
<br/>
<br/>
<div id="image1"></div>

</body>
</html>

구글 블로그 AMP

이 블로그 검색

구글 AMP – 애니메이션