-
Notifications
You must be signed in to change notification settings - Fork 0
/
55-basic-css-animation.htm
145 lines (99 loc) · 3.96 KB
/
55-basic-css-animation.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<title>Temel CSS Hareketlendirmesi</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- LIBRARY FILES -->
<link rel="stylesheet" type="text/css" href="basic/basic.min.css">
<script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>
<script>
/*
- Bu örnekte, nesne başlangıçta, büyüyerek geliyor. Ve daha sonra,
tıklanan gri alana doğru hareket ediyor.
*/
// DEĞİŞKENLER
// İlk sayfa taşıyıcısı
var a0
// ÖZEL FONKSİYONLAR
// İlk çalışan fonksiyon.
var start = function() {
// NESNE: İlk sayfa taşıyıcısı
a0 = Box(0, 0, page.width, page.height)
// NESNE: Buton 1 üst
a0.btn1 = Box(0, 0, 40, 40)
a0.add(that)
that.color = "lightgray"
that.round = 20
that.center()
that.top -= 150
that.onClick(refreshCircle)
// NESNE: Buton 2 alt
a0.btn2 = Box(0, 0, 40, 40)
a0.add(that)
that.color = "lightgray"
that.round = 20
that.center()
that.top += 150
that.onClick(refreshCircle)
// NESNE: Hareket özelliği olan daire
a0.circle = Box(0, 0, 20, 20)
a0.add(that)
that.color = "#FE5D49"
that.round = 100
that.center()
that.opacity = 0
// Belirlenen özellikleri, CSS ile hareketlendir.
that.setMotion("left 1s, top 1s, width 1s, height 1s, border-radius 1s, background-color 1s, opacity 1s")
// NOT: Bu hareket özelliği, iptal edilene kadar korunur.
// Hareket özelliğini, iptal etmek için,
// that.setMotion("none")
/*
var self = that;
setTimeout(function() {
self.width = 150
self.height = 150
self.opacity = 1
self.center()
}, 5000);
*/
// İlk oluşturulma konumundan, aşağıdaki özelliklere yumuşak geçiş (hareket) yap.
that.withMotion(function(self) {
self.width = 150
self.height = 150
self.opacity = 1
self.center()
// NOT: self, a0.circle nesnesinin kendisidir.
})
// Sayfa boyutu, her değiştiğinde
page.onResize(pageResized)
}
// DİĞER FONKSİYONLAR
var pageResized = function() {
// Sayfayı, yeniden boyutlandır.
a0.width = page.width
a0.height = page.height
// Bu nesne için; hareketi, geçici olarak devre dışı bırak.
a0.circle.dontMotion()
a0.circle.center()
// NOT: Sayfa boyutu değiştirildiğinde,
// nesnenin hareketsiz olarak gitmesini için dontMotion() kullanılmıştır.
a0.btn1.center()
a0.btn1.top -= 150
a0.btn2.center()
a0.btn2.top += 150
}
var refreshCircle = function(self) {
a0.circle.top = self.top - 55
a0.circle.left = self.left - 55
// NOT: CSS hareketi eklendiği için,
// nesnenin, özellik değişiklikleri hareket ile olacaktır.
// NOT: 55 sayısnın hesabı: num((a0.circle.width / 2) - (self.width / 2))
// NOT: Burada; self, üzerine basılan nesnedir.
}
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>