MooTools - Fx.Options
MooTools zapewnia różne Fx.Options, które pomogą Fx.Tween i Fx.Morph. Te opcje zapewniają kontrolę nad efektami.
Omówmy kilka opcji, które zapewniają MooTools. Zanim przejdziemy dalej, spójrz na następującą składnię konfigurowania opcji.
Składnia
var morphObject = new Fx.Morph(morphElement, {
//first state the name of the option
//place a :
//then define your option
});
fps (klatki na sekundę)
Ta opcja określa liczbę klatek na sekundę w animacji podczas przekształcania. Możemy zastosować te fps do funkcji Morph lub Tween. Domyślnie wartość fps wynosi 50. Oznacza to, że każda funkcjonalność podczas morfingu zajmie 50 klatek na sekundę.
Przykład
Weźmy przykład, w którym dokonamy morfowania elementu div przy użyciu 5 fps. Spójrz na poniższy kod.
<!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>
Otrzymasz następujący wynik -
Wynik
Kliknij na STARTprzycisk, aby znaleźć animację morfingu. Pomaga nam to obserwować liczbę klatek używanych do animacji. Użyj różnych wartości fps, aby uzyskać różnicę w animacji. Zalecane jest używanie wartości fps mniejszej niż 10. To pomoże ci łatwo uzyskać różnicę.
jednostka
Ta opcja służy do ustawiania typu jednostki dla liczb. Generalnie mamy trzy różne typy jednostek - px,% i ems. Spójrz na następującą składnię.
Składnia
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});
Powyższa składnia polega na przypisaniu wartości procentowej jednostkom. Oznacza to, że wszystkie wartości liczbowe są traktowane jako procenty.
połączyć
Ta opcja umożliwia zarządzanie wieloma wywołaniami w celu rozpoczęcia animacji. Jeśli zastosujesz jednocześnie wiele wywołań zdarzeń, będą one traktowane jako wywołania linków. Po zakończeniu pierwszego wywołania drugie wywołanie jest wykonywane automatycznie. Zawiera następujące trzy opcje -
ignore- To jest opcja domyślna. Ignoruje dowolną liczbę wywołań, dopóki nie zakończy efektu.
cancel- To anuluje obecny efekt, gdy jest wykonywany inny. Jest zgodny z najnowszym priorytetem połączeń.
Chain- Pozwala to łączyć efekty razem i utrzymywać stos wywołań. Wykonuje wszystkie wywołania, dopóki nie przejdzie przez wszystkie połączone wywołania na stosie.
Spójrz na następującą składnię dotyczącą korzystania z opcji łącza.
Składnia
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});
Trwanie
Ta opcja służy do określenia czasu trwania animacji. Na przykład, jeśli chcesz, aby obiekt poruszał się o 100 pikseli w czasie 1 sekundy, będzie poruszał się wolniej niż obiekt poruszający się o 1000 pikseli w ciągu 1 sekundy. Możesz wprowadzić liczbę mierzoną w milisekundach. Lub możesz użyć dowolnej z tych trzech opcji zamiast liczb.
- Krótki = 250 ms
- Normalny = 500 ms (domyślnie)
- Długi = 1000 ms
Spójrz na następującą składnię dotyczącą używania czasu trwania.
Składnia
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});
Lub,
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});
przejście
Ta opcja służy do określenia typu przejścia. Na przykład, jeśli powinno to być płynne przejście lub powinno zaczynać się powoli, przyspieszyć pod koniec. Spójrz na następującą składnię, aby zastosować przejście.
Składnia
var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});
W poniższej tabeli opisano różne typy przejść.
S.No. | Typ i opis przejścia |
---|---|
1 | Liniowy Wyświetla liniowe przejście ze zdarzeniami in, out, in-out |
2 | Kwadrat Wyświetla kwadratowe przejście ze zdarzeniami in, out, in-out |
3 | Sześcienny Wyświetla sześcienne przejście ze zdarzeniami in, out, in-out |
4 | Kwarta Wyświetla przejście kwartetyczne bez wydarzeń in, out, in-out |
5 | Kwinta Wyświetla kwintyczne przejście ze zdarzeniami in, out, in-out |
6 | Pow Służy do generowania Quad, Cubic, Quart i Quint ze zdarzeniami in, out, in-out |
7 | Expo Wyświetla wykładnicze przejście ze zdarzeniami in, out, in-out |
8 | Circ Wyświetla okrągłe przejście ze zdarzeniami in, out, in-out |
9 | Sinus Wyświetla przejście sinusoidalne ze zdarzeniami in, out, in-out |
10 | Plecy Sprawia, że przejście się cofa, a potem wszystko z powrotem, ze zdarzeniami: wejście, wyjście, wejście-wyjście |
11 | Odbić się Sprawia, że przejście jest sprężyste w przypadku wydarzeń in, out, in-out |
12 | Elastyczny Elastyczne przejście krzywej ze zdarzeniami in, out, in-out |