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