AMP

Karmaşık animasyonlara giriş

Important: this documentation is not applicable to your currently selected format stories!

Sınıflar ekleyerek ve kaldırarak yönetilemeyen animasyonlar için AMP, animasyona özgü birkaç bileşen sunar. Bu bileşenler, AMP'nin ilkelerini animasyonlara uygular: bunlar hızlı, verimli ve kullanıcı önceliklidir. AMP, ana kareler içinde izin verilen CSS özelliklerine kısıtlama getirir, ancak ince ayar kontrolü, kusursuz animasyonlar ve fazladan çalışma gerektirmeden tarayıcılar arası uyumluluk gibi faydalar sağlar.

Oynatmayı sıkı bir şekilde kontrol etmeniz gerekiyorsa amp-animation kullanın ve aynı anda birden fazla öğe animasyonuyla doğru zamanlamaya sahip olun.

Temel AMP animasyonu oluşturma

amp-animation bileşeni, AMP'de Web Animation API'sinin kullanılmasına izin verir.

Temel bir amp-animation, aşağıdaki önemli parçalardan oluşan bir JSON nesnesidir:

<amp-animation layout="nodisplay" id="exampleAnimation">
<script type="application/json">
{
 "selector": "#elementID", //select the element to animate
 "duration": "1s", //timing property
 "iterations": 2, //timing property
 "fill": "both", //timing property
 "keyframes": {"opacity": 0, "transform": "scale(2)"} //keyframes
}
</script>
</amp-animation>
<!-- trigger -->
<button on="tap:exampleAnimation.start">

Seçici

CSS'ye çok benzer şekilde, amp-animation bileşeni, "selector" alanında öğenin etiket adını, sınıfını veya kimliğini bildirerek animasyon özelliklerini öğeye bağlar. Bileşen, bildirilen etiket türü veya sınıf adıyla her öğeyi canlandırır. Tek bir öğeyi canlandırdığınızdan emin olmak için bir kimlik kullanın.

Zamanlama özelliği

Zamanlama özelliği, bir animasyonun ne kadar süreceğini, kaç kere oynatılacağını ve anahtar karenin hangi yönde yürütüleceğini kontrol eder.

Zamanlama özelliği gerekli değildir, ancak duration ve fill gibi zaman ve görüntü ile ilgili özellikler eksikse animasyon çalışmayabilir.

Anahtar kareler

CSS, geçişler yoluyla bir durumdan diğerine geçiş yapmanıza izin verirken, amp-animation (CSS animasyonlarına benzer) uygulamak için animasyon özelliklerini ana kareler olarak bildirmeniz gerekir. Sorunsuz oynatma ve tarayıcılar arası uyumluluk sağlamak için amp-animation, yeniden düzenlemeye neden olmayan ve besteleyici dizesinde canlandırabilen GPU hızlandırmalı özelliklerle hangi anahtar kare özelliklerinin kullanılabileceğini kısıtlar. Bu, animasyonların AMP'ye ve tarayıcının oluşturma sürecine müdahale etmesini önler.

Anahtar kareler, doğrudan bir amp-animation üzerinden tanımlanır veya özellik kısıtlamalarına uydukları sürece <amp style-keyframe> üzerinden referans alınır. amp-animation içindeki anahtar kareler hakkında daha fazlasını buradan okuyun.

Tetikleyici

Tetikleyici animasyon sekansını başlatır. amp-animation eklentisi, <body> sayfada görünür hale geldiğinde veya onu bir AMP eylemine veya olayına bağlandığında başlar.

<body> görünürlüğünün tetiklenmesi, animasyonun "ekranın üst kısmında" görünmesi nedeniyle sayfa yüklenir yüklenmez veya sayfanın ilk görünüm alanında çalışması gerektiğinde kullanışlıdır. Animasyonlar, bileşene bir öznitelik olarak trigger="visibility" ekleyerek görünürlük yoluyla tetiklenir.

<amp-animation layout="nodisplay"
    trigger="visibility">
  ...
</amp-animation>

Animasyon, amp-animation bileşenine bir id atayarak ve bu id bir düğmeye basmak gibi istenen olay tetikleyicisine bağlayarak bir eyleme veya olaya bağlanır.

<amp-animation layout="nodisplay" id="exampleAnimation">
  ...
</amp-animation>

<button on="tap:exampleAnimation.start">

Karmaşık animasyonlar oluşturma

amp-animation içinde bir animasyon oluşturmak, bir animasyonu başlatmanın ve durdurmanın ötesine geçen ayrıntılı kontrole olanak tanır: Ayrıca belirli bir noktayı duraklatabilir, tersine çevirebilir ve yönlendirebilir. Hatta birden fazla animasyonu birbirine bağlayabilir ve bir sekanstaki öğeleri canlandırabilirsiniz.

Alt hedefler

Aynı etiketin veya sınıfın öğeleri belirli zamanlama özelliklerine sahip olabilir ve üst düzey animasyonda tanımlanan değişkenlerin değerlerini geçersiz kılabilir.

<body>
  <h1>Hello World!</h1>
  <h1>Hello World!</h1>
  <h1 id="helloMe">Hello World!</h1>
  <h1>Hello World!</h1>
  <amp-animation layout="nodisplay" id="animateThis">
    <script type="application/json">
      {
        "selector": "h1",
        "duration": "3s",
        "fill": "both",
        "keyframes": [{"transform": "translateX(0px)"}, {"transform": "translateX(50%)"}],
        "subtargets": [
          {
            "index": 1,
            "duration": "1s"
          },
          {
            "selector": "#helloMe",
            "direction": "reverse",
            "duration": "5s"
          }
        ]
      }
    </script>
  </amp-animation>
  <button on="tap:animateThis.start">
   start
  </button>
</body>
Bu kod parçacığını playground'ta aç

Zincirleme animasyonlar

Birden fazla animasyon, büyük bir sekans oluşturmak için birbirine bağlanabilir. amp-animation bileşeni içindeki animations dizisine animasyonlar yazarak, bir videodaki kaplamalar gibi zamanlanmış efektler oluşturabilirsiniz.

<amp-animation id="overlaysAnim" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "3s",
      "fill": "both",
      "animations": [{
          "selector": ".one",
          "keyframes": [{
              "opacity": "1",
              "offset": 0
            },
            {
              "opacity": "1",
              "offset": 0.04
            },
            {
              "opacity": "0",
              "offset": 0.0401
            },
            {
              "opacity": "0",
              "offset": 1
            }
          ]
        },
      ]
    }
  </script>
</amp-animation>

Bu kurulum, her animasyonu bir sırayla 3 saniye boyunca oynatır.

Daha büyük animasyonlar için, animations dizisi içindeki animasyonlar diğer amp-animation bileşenlerine başvurabilir.

<amp-animation id="addEnergy" layout="nodisplay">
  <script type="application/json">
  {
    "duration": "0.3s",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": "#energy",
        "keyframes": [
          {"transform": "scaleX(calc(num(width('#energy'))/10))"},
          {"transform": "scaleX(calc(num(width('#energy'))/10 + 3))"}
        ]
      },
      {
        "animation": "atomExcite"
      }
    ]
  }
  </script>
</amp-animation>


<amp-animation id="atomExcite" layout="nodisplay" trigger="visibility">
<script type="application/json">
  {
    "duration": "0.3s",
    "iterations": "2",
    "fill": "both",
    "direction": "alternate",
    "animations": [
      {
        "selector": ".atom",
        "keyframes": {
          "transform": "translate(20vw)"
        }
      }
    ]
  }
  </script>
</amp-animation>

Bilinmeyen sayıda öğeyi canlandırma

CSS eklentileriyle birlikte var() ve calc() eklentilerini kullanarak, herhangi bir sayıda öğeyle çalışan karmaşık ve zamanlanmış animasyonlar yazabilirsiniz. Bu, dinamik ve kullanıcı tarafından oluşturulan verilerin kolaylıkla ve akışkanlıkla canlandırılmasını sağlar.

<head>
  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
  <style amp-custom>
    .parent {
      perspective: 1000px;
      transform-style: preserve-3d;
      position: relative;
      margin: 10px;
      width: 239px;
      height: 335px;
    }
    .card {
      transform-origin: left;
      height: 50%;
      width: 50%;
    }
  </style>
</head>
<body>
  <amp-animation layout="nodisplay" id="cardAdmin">
    <script type="application/json">
      {
        "selector": ".card",
        "--duration": "2s",
        "duration": "var(--duration)",
        "delay": "calc((length() - index() - 1) * var(--duration))",
        "easing": "ease-in",
        "iterations": "1",
        "fill": "both",
        "keyframes": [
            {"transform": "translate3d(0px, 0px, 0px)"},
            {"transform": "translate3d(50%, 0px, 100px)"},
            {"transform": "translate3d(110%, 0px, 0px) rotateY(-20deg)"},
            {"transform": "translate3d(50%, 0px, -100px)"},
            {"transform": "translate3d(0px, 0px, -1px)"}
        ]
      }
    </script>
  </amp-animation>
  <div class="parent" on="tap:cardAdmin.start" tabindex=none role="animation">
    <amp-img class="card" src="https://upload.wikimedia.org/wikipedia/commons/7/70/3C.svg" layout="fill"></amp-img>
    <amp-img class="card" src="https://upload.wikimedia.org/wikipedia/commons/3/3a/3H.svg" layout="fill"></amp-img>
    <amp-img class="card" src="https://upload.wikimedia.org/wikipedia/commons/e/e1/KC.svg" layout="fill"></amp-img>
  </div>
</body>
Bu kod parçacığını playground'ta aç
  • Bir değişkeni --duration olarak bildirir ve iki saniyelik bir değer verir.
  • duration değerini var --duration değerine ayarlar.
  • .card seçicisine karşılık gelen her öğeye uygulanan gecikmeyi hesaplar.
    1. length() eklentisi, kaç tane .card öğesinin seçildiğini hesaplar
    2. Uzunluk daha sonra her .card'in index() çıkarır
    3. Elde edilen değer var --duration ile çarpılır
    4. Son toplam, bu öğenin gecikmesine saniyeler içinde uygulanır
  • Animasyon, her bir öğeye ayrı ayrı uygulanır. Böylece kartlar aynı anda değil, birbiri ardına karıştırılır.

AMP oyun alanında animasyonu açın ve bu davranışı test etmek için daha fazla amp-img öğesi ekleyin.

Her yerde harika görünme

Animasyonlar, özelleştirilmiş efektlere izin veren koşullar içerebilir. Animasyonları media koşulu aracılığıyla herhangi bir ekran boyutuna uyarlayın ve bir switch ifadesindeki supports koşullarını etkinleştirerek geriye dönük tarayıcı uyumluluğunu destekler.

<head>
 <style amp-custom>
    .drop {
      width: 20px;
      height: 20px;
      background: blue;
      margin-top: 1em;
      border-radius: 50%;
    }
    .right {
      position: absolute;
      right: 0;
      background: red;
    }
  </style>
  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
</head>
<body>
<amp-animation id="mediaAnimation" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "1s",
      "iterations": "4",
      "fill": "both",
      "direction": "alternate",
      "animations": [
        {
          "media": "(min-width: 300px)",
          "selector": ".drop",
          "keyframes": {
            "transform": "translate(100vw)"
          }
        },
        {
          "media": "(max-width: 300px)",
          "selector": ".drop",
          "keyframes": {
            "transform": "translate(50vw)"
          }
        },
        {
          "media": "(min-width: 300px)",
          "selector": ".right",
          "keyframes": {
            "transform": "translate(-100vw)"
          }
        },
        {
          "media": "(max-width: 300px)",
          "selector": ".right",
          "keyframes": {
            "transform": "translate(-50vw)"
          }
        }
      ]
    }
  </script>
</amp-animation>

  <div class="rain">
    <div class="drop"></div>
    <div class="drop right"></div>
    <div class="drop"></div>
    <div class="drop right"></div>
    <div class="drop"></div>
    <div class="drop right"></div>
    <div class="drop"></div>
    <div class="drop right"></div>
  </div>
  <button on="tap:mediaAnimation.start">Start</button>
</body>
Bu kod parçacığını playground'ta aç