teratail
回答率
85.48%
質問するログイン新規登録
トップCSS3に関する質問徐々に遅くしたい。

編集履歴

回答編集履歴

2

変化を自然に

2017/01/07 10:29

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -1,14 +1,36 @@
1
1
  これで「徐々に遅く」はなりますが、良いのでしょうか？
2
+
3
+
2
4
 
3
5
  修正
4
6
 
7
+
8
+
5
9
  変化をなめらかにしてみました。
10
+
11
+
12
+
13
+ 修正
14
+
15
+
16
+
17
+ 変化を自然にしてみました。
18
+
19
+ これでどうでしょう？
6
20
 
7
21
  ```JavaScript
8
22
 
9
23
  $(function() {
10
24
 
25
+ var coefficient = 2.5;
26
+
27
+ var coefficientA = - Math.log(1 - coefficient / Math.E);
28
+
29
+ var coefficientB = (1 - Math.log(coefficient)) / coefficientA;
30
+
11
- var coefficient = (1 - Math.sqrt(5)) / 2;
31
+ //var coefficient = (1 - Math.sqrt(5)) / 2;
32
+
33
+
12
34
 
13
35
  $('.atom').animate(
14
36
 
@@ -22,9 +44,9 @@
22
44
 
23
45
  // now : 0 → 1;
24
46
 
25
- var scale = - 1 / coefficient - 1 / (now - coefficient);
47
+ var scale = Math.E / coefficient - Math.exp(- coefficientA * (now - coefficientB));
26
48
 
27
- //var scale = Math.pow(now, 1/3);
49
+ //var scale = - 1 / coefficient - 1 / (now - coefficient);
28
50
 
29
51
  $(this).css('transform', 'scale(' + scale + ')');
30
52
 
@@ -42,6 +64,4 @@
42
64
 
43
65
  });
44
66
 
45
-
46
-
47
67
  ```

1

変化をなめらかに

2017/01/07 10:29

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -1,8 +1,14 @@
1
1
  これで「徐々に遅く」はなりますが、良いのでしょうか？
2
+
3
+ 修正
4
+
5
+ 変化をなめらかにしてみました。
2
6
 
3
7
  ```JavaScript
4
8
 
5
9
  $(function() {
10
+
11
+ var coefficient = (1 - Math.sqrt(5)) / 2;
6
12
 
7
13
  $('.atom').animate(
8
14
 
@@ -10,13 +16,15 @@
10
16
 
11
17
  {
12
18
 
13
- duration : 10000,
19
+ duration : 5000,
14
20
 
15
21
  step : function(now) {
16
22
 
17
23
  // now : 0 → 1;
18
24
 
25
+ var scale = - 1 / coefficient - 1 / (now - coefficient);
26
+
19
- var scale = Math.pow(now, 1/3);
27
+ //var scale = Math.pow(now, 1/3);
20
28
 
21
29
  $(this).css('transform', 'scale(' + scale + ')');
22
30
 
@@ -34,4 +42,6 @@
34
42
 
35
43
  });
36
44
 
45
+
46
+
37
47
  ```