Google AMP - ภาพเคลื่อนไหว

Amp-animation เป็นส่วนประกอบของแอมป์ที่กำหนดภาพเคลื่อนไหวที่จะใช้กับส่วนประกอบแอมป์อื่น ๆ บทนี้จะกล่าวถึงรายละเอียด

ในการทำงานกับ 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>

animation ส่วนประกอบประกอบด้วยสิ่งต่อไปนี้ - Selectors, Variables, Timing Properties, Keyframes etc.

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

ตัวเลือก

ที่นี่เราต้องให้คลาสหรือ id ขององค์ประกอบที่จะใช้ภาพเคลื่อนไหว

ตัวแปร

เป็นค่าที่กำหนดให้ใช้ภายในคีย์เฟรม ตัวแปรถูกกำหนดโดยใช้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 เป็นตัวแปรและค่าของตัวแปรถูกกำหนดไว้ในตัวอย่างที่แสดง

คุณสมบัติของเวลา

คุณสามารถกำหนดระยะเวลาและความล่าช้าของภาพเคลื่อนไหวได้ที่นี่ ต่อไปนี้เป็นคุณสมบัติเวลาที่รองรับ -

ทรัพย์สิน มูลค่า คำอธิบาย
ระยะเวลา คุณสมบัติของเวลาค่าจะต้องเป็นมิลลิวินาที ระยะเวลาที่ใช้สำหรับภาพเคลื่อนไหว
ล่าช้า คุณสมบัติของเวลาค่าจะต้องเป็นมิลลิวินาที ความล่าช้าก่อนที่ภาพเคลื่อนไหวจะเริ่มดำเนินการ
endDelay คุณสมบัติเวลาค่าจะต้องเป็นมิลลิวินาทีหรือวินาที ความล่าช้าที่กำหนดซึ่งจะมีผลเมื่อภาพเคลื่อนไหวเสร็จสิ้น
การทำซ้ำ ค่าต้องเป็นตัวเลข จำนวนครั้งที่ต้องเล่นภาพเคลื่อนไหวซ้ำ
เริ่มต้น ค่าต้องเป็นตัวเลข เวลาชดเชยที่เอฟเฟกต์เริ่มเคลื่อนไหว
การค่อยๆเปลี่ยน ค่าคือสตริง สิ่งนี้ใช้เพื่อรับเอฟเฟกต์การค่อยๆเปลี่ยนให้กับแอนิเมชั่นตัวอย่างบางส่วนสำหรับการค่อยๆเปลี่ยนเป็นแบบเชิงเส้นความง่ายความสะดวกในการคลายออกความง่ายในการเข้าออก
ทิศทาง ค่าคือสตริง หนึ่งใน "ปกติ" "ย้อนกลับ" "ทางเลือก" หรือ "ทางเลือกย้อนกลับ"
เติม ค่าคือสตริง ค่าสามารถเป็น "ไม่มี" "ไปข้างหน้า" "ถอยหลัง" "ทั้งคู่" "อัตโนมัติ"

คีย์เฟรม

คีย์เฟรมสามารถกำหนดได้หลายวิธีเช่นในรูปแบบวัตถุหรือรูปแบบอาร์เรย์ ลองพิจารณาตัวอย่างต่อไปนี้

ตัวอย่าง

"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'

Note - การใช้คุณสมบัติอื่น ๆ นอกเหนือจากรายการสีขาวจะทำให้เกิดข้อผิดพลาดในคอนโซล

ตอนนี้ให้เราทำความเข้าใจผ่านตัวอย่างง่ายๆซึ่งจะหมุนภาพเมื่อใช้ภาพเคลื่อนไหว ในตัวอย่างนี้เรากำลังหมุนภาพโดยใช้ amp-animation

ตัวอย่าง

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-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
            -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 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>

ตัวเลือกที่นี่คือรหัสของรูปภาพที่ใช้แอนิเมชั่นการหมุน -

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

ตัวอย่างการใช้คีย์เฟรมจาก CSS

ตัวอย่าง

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-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>

เอาต์พุต

ทริกเกอร์ภาพเคลื่อนไหว

ด้วย trigger =” visibility” ภาพเคลื่อนไหวจะถูกนำไปใช้โดยค่าเริ่มต้น ในการเริ่มภาพเคลื่อนไหวในเหตุการณ์เราต้องลบ trigger =” visibility” และเพิ่มเหตุการณ์เพื่อเริ่มภาพเคลื่อนไหวดังที่แสดงในตัวอย่างด้านล่าง -

ตัวอย่าง

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-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(2); 
         }
         @keyframes example {
            0% {transform:scale(2)}
            75% {transform:scale(1)}
            100% {transform:scale(0.5)}
         }
         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เปิดเพื่อเริ่มต้นด้วยภาพเคลื่อนไหว ในทำนองเดียวกันมีการดำเนินการอื่น ๆ ที่รองรับซึ่งมีดังต่อไปนี้ -

  • start
  • pause
  • restart
  • resume
  • togglePause
  • seekTo
  • reverse
  • finish
  • cancel

ให้เราดูตัวอย่างการทำงานที่เราสามารถใช้การกระทำ

ตัวอย่าง

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
      <title>Google AMP - Amp Video</title>
      <link rel = "canonical" href = "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width=device-width,minimum-scale = 1,initial-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>

เอาต์พุต

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved