MooTools - Fx.Options

MooTools, Fx.Tween ve Fx.Morph'a yardımcı olacak farklı Fx.Options sağlar. Bu seçenekler size etkiler üzerinde bir kontrol sağlayacaktır.

MooTools'un sağladığı birkaç seçeneği tartışalım. Devam etmeden önce, seçenekleri ayarlamak için aşağıdaki sözdizimine bir göz atın.

Sözdizimi

var morphObject = new Fx.Morph(morphElement, {
   //first state the name of the option
   //place a :
   //then define your option
});

fps (saniyedeki kare sayısı)

Bu seçenek, dönüşüm sırasında animasyondaki saniyedeki kare sayısını belirler. Bu fps'leri Morph veya Tween işlevlerine uygulayabiliriz. Varsayılan olarak, fps değeri 50'dir. Bu, herhangi bir işlevselliğin dönüşüm sırasında saniyede 50 kare alacağı anlamına gelir.

Misal

Bir div elemanını 5 fps kullanarak biçimlendireceğimiz bir örnek alalım. Aşağıdaki koda bir göz atın.

<!DOCTYPE html>
<html>

   <head>
      <style>
         #morph_element {
            width: 100px;
            height: 100px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var morphStart = function(){
            this.start({
               'width': 200,
               'height': 200,
               'background-color': '#d3715c'
            });
         }
         
         window.addEvent('domready', function() {
            var morphElement = $('morph_element');
            var morphObject = new Fx.Morph(morphElement, {
               fps: 5
            });
            
            $('start').addEvent('click', morphStart.bind(morphObject));
         });
      </script>
   </head>
   
   <body>
      <div id = "morph_element"> </div><br/>
      <input type = "button" id = "start"value = "START"/>
   </body>
   
</html>

Aşağıdaki çıktıyı alacaksınız -

Çıktı

Tıkla STARTgeçiş animasyonunu bulmak için düğmesine basın. Bu, animasyon için kullanılan kare sayısını gözlemlememize yardımcı olur. Animasyondaki farkı elde etmek için fps için farklı değerler kullanın. 10'dan küçük fps değerinin kullanılması tavsiye edilir. Bu, farkı kolayca elde etmenize yardımcı olacaktır.

birim

Bu seçenek, numaralar için birim türünü ayarlamak için kullanılır. Genel olarak, üç farklı birim türüne sahibiz - px,% ve ems. Aşağıdaki söz dizimine bir göz atın.

Sözdizimi

var morphObject = new Fx.Morph(morphElement, {
   unit: '%'
});

Yukarıdaki sözdizimi, birimlere yüzde tahsis etmektir. Bu, sayılardaki tüm değerlerin yüzde olarak kabul edildiği anlamına gelir.

bağlantı

Bu seçenek, bir animasyonu başlatmak için birden fazla aramayı yönetmenin bir yolunu sağlar. Aynı anda birden fazla olay çağrısı uygularsanız, bu çağrılar bağlantı çağrıları olarak alınacaktır. İlk çağrı bittiğinde, ikinci çağrı otomatik olarak yürütülür. Aşağıdaki üç seçeneği içerir -

  • ignore- Bu varsayılan seçenektir. Etkisi tamamlanana kadar herhangi bir sayıda çağrıyı yok sayar.

  • cancel- Bu, başka bir yapıldığında mevcut efekti iptal eder. En yeni çağrı önceliğini izler.

  • Chain- Bu, efektleri birbirine bağlamanıza ve çağrı yığınını korumanıza olanak tanır. Yığındaki tüm zincirleme aramalardan geçene kadar tüm aramaları yürütür.

Bağlantı seçeneğini kullanmak için aşağıdaki sözdizimine bir göz atın.

Sözdizimi

var morphObject = new Fx.Morph(morphElement, {
   link: 'chain'
});

Süresi

Bu seçenek, animasyonun süresini tanımlamak için kullanılır. Örneğin, bir nesnenin 1 saniye içinde 100 piksel hareket etmesini istiyorsanız, 1 saniyede 1000 piksel hareket eden bir nesneden daha yavaş ilerleyecektir. Milisaniye cinsinden ölçülen bir sayı girebilirsiniz. Veya sayılar yerine bu üç seçenekten herhangi birini kullanabilirsiniz.

  • Kısa = 250 ms
  • Normal = 500 ms (varsayılan)
  • Uzun = 1000 ms

Süreyi kullanmak için aşağıdaki sözdizimine bir göz atın.

Sözdizimi

var morphObject = new Fx.Morph(morphElement, {
   duration: 'long'
});

Veya,

var morphObject = new Fx.Morph(morphElement, {
   duration: 1000
});

geçiş

Bu seçenek, geçiş türünü belirlemek için kullanılır. Örneğin, yumuşak bir geçiş olacaksa veya yavaş başlaması gerekiyorsa, sona doğru hızlanın. Geçişi uygulamak için aşağıdaki sözdizimine bir göz atın.

Sözdizimi

var tweenObject = new Fx.Tween(tweenElement, {
   transition: 'quad:in'
});

Aşağıdaki tablo farklı geçiş türlerini açıklamaktadır.

S.No. Geçiş türü ve Açıklaması
1

Doğrusal

Giriş, çıkış, çıkış olaylarıyla doğrusal bir geçiş görüntüler

2

Dörtlü

Giriş, çıkış, çıkış olayları ile ikinci dereceden bir geçiş görüntüler

3

Kübik

Giriş, çıkış, çıkış olaylarıyla kübik bir geçiş görüntüler

4

Quart

Giriş, çıkış, çıkış olaylarıyla dörtlü bir geçiş görüntüler

5

Quint

Giriş, çıkış, çıkış olayları ile temsili bir geçiş görüntüler

6

Pow

Giriş, çıkış, çıkış olaylarıyla Quad, Cubic, Quart ve Quint oluşturmak için kullanılır

7

Fuar

Giriş, çıkış, çıkış olaylarıyla üstel bir geçiş görüntüler

8

Circ

Giriş, çıkış, çıkış olaylarıyla dairesel bir geçiş görüntüler

9

Sinüs

Giriş, çıkış, giriş-çıkış olaylarıyla sinüs kıvrımlı bir geçiş görüntüler

10

Geri

Geçişin içeri, dışarı, içeri-dışarı olayları ile önce geri, sonra ileri gitmesini sağlar

11

Sıçrama

Giriş, çıkış, çıkış olaylarıyla geçişi zıplatır

12

Elastik

Giriş, çıkış, giriş-çıkış olaylarıyla elastik eğri geçişi