西暦をカウントアップする時の動きを変更したいです

西暦をカウントアップする機能を設定しているのですが
一定のスピードでうごくのではなく
「段々早くなって、最後は遅くなる」ような動きを考えています。
cssでanimationの「ease-in-out」や
scriptに「easing:」など、
いろいろ試してみたのですが思うようにならず悩んでおります

どのようにすれば良いか
お力添えいただけないでしょうか
よろしくお願いします。

script

$(function(){
	var countElm = $('.count'),
	countSpeed = 50;

	countElm.each(function(){
		var self = $(this),
		countMax = self.attr('data-num'),
		thisCount = self.text(),
		countTimer;

		function timer(){
			countTimer = setInterval(function(){
				var countNext = thisCount++;
				self.text(countNext);

				if(countNext == countMax){
					clearInterval(countTimer);
				}
			},countSpeed);
		}
		timer();
	});

});

HTML

<div id="container">
<p class="count" data-num="2021">1980</p>
</div>

CSS

#container {
  position: relative;
  width: 100%;
  min-height: 100vh;
}
p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  font-size: 5rem;
}

m.ts10806

2021/11/25 11:17

countSpeedを増減させれば良いのでは？

klc_cre

2021/11/25 23:58

m.ts10806さんご返信ありがとうございます countSpeedを増やすだけですと単に全体の動きが遅くなるだけで動きの中に遅い早いを持たす事ができなかったんです...

行動規範の内容に同意します

回答2件

CSSではないアニメーションにCSSのキーワードを使うことはできません。

b(t): (0,0) から (1,1) に向かうタイミング関数
v0: アニメーション開始時の値
v1: アニメーション終了時の値
t0: アニメーション開始時点の時刻
t1: アニメーションを終了したい時刻

とすると、以下のようなコードになるでしょう。

js
1let v0 = Number(self.textContent);
2let v1 = Number(self.dataset.num);
3let t0 = performance.now();
4let t1 = t0 + 50 * (v1 - v0);
5let frameCallback = t => {
6  let v = v0 + (v1 - v0) * b(Math.min(1.0, (t - t0) / (t1 - t0)));
7  self.textContent = Math.floor(v);
8  if (t < t1)
9    requestAnimationFrame(frameCallback);
10};
11requestAnimationFrame(frameCallback);

で、問題は b() ですが、function b(t) { return t; } とすれば linear 相当です。ease-in-out などは3次ベジェ曲線で実現できるので、Javascriptでcubic-bezierを計算するを参考にして関数を用意すれば大丈夫です。

投稿2021/11/25 13:15

int32_t

総合スコア21695

klc_cre

2021/11/26 08:04

int32_tさんご返信ありがとうございます。申し訳ございませんいろいろ調べてみたのですがどのようにすれば良いか分からずで... よろしければ、助言をいただく事は可能でしょうかよろしくお願いします

int32_t

2021/11/26 08:11

何がわかりませんか?

klc_cre

2021/11/26 09:47

教えていただいたスクリプトを元々のスクリプトに追加して試したりしたのですが動く気配もありませんでしたどのように使用すればよろしいでしょうか

int32_t

2021/11/26 15:59

そのままコピペしようとせず、何をしているコードなのか理解して自分のコードで使えるよう修正するのが理想ですね。とりあえず、let self = this; とこの回答のコードを countElm.each(function(){ の中に入れて、function b() を定義すれば動くかもしれません。

klc_cre

2021/11/29 23:49

確かに、そのまま貼り付けるのではなく理解が大事ですねいろいろと調べながら試していきたいと思いますありがとうございました

行動規範の内容に同意します

ベストアンサー

三角関数を使ってみましたが、ベジェ曲線がよかったかも

js
1<!DOCTYPE hrml>
2<meta charset="utf-8">
3<title></title>
4<style>
5p.count { font-size: 30px; }
6</style>
7
8<body>
9
10<div>
11  <p class="count" data-begin="2000" data-end="2021" data-time="4000"></p>
12  <p class="count" data-begin="1980" data-end="2021" data-time="4000"></p>
13  <p class="count" data-begin="1900" data-end="2021" data-time="4000"></p>
14</div>
15
16<script>
17
18class C {
19  
20  constructor (target, begin, end, limitTime) {
21    this.target = target;
22    this.begin = begin;
23    this.end = end;
24    this.limitTime = limitTime;
25
26    this.disp ();
27  }
28
29
30  start () {
31    if (! this.requestId) {
32      let t = performance.now ();
33      this.startTime = t;
34      this.loop (t);
35    }
36    return this;
37  }
38
39
40  stop () {
41    if (this.requestId) {
42      cancelAnimationFrame (this.requestId);
43      this.requestId = null;
44    }
45    return this;
46   }
47
48
49   reset () {
50    this.stop ();
51    this.requestId = null;
52    this.timeFraction = null;
53    this.startTime = null;
54    return this;   
55   }
56
57
58  disp () {
59    this.target.textContent = this.timeFraction ? String (this.value): '';
60    return this;
61  }
62
63
64  loop (time) {
65    this.countup (time);
66    this.disp ();
67    if (1 === this.timeFraction)
68      this.stop ();
69    else
70      this.requestId = requestAnimationFrame (this.loop.bind (this));
71  }
72
73
74  countup (time) {
75    let t = (time - this.startTime) / this.limitTime;
76    this.timeFraction = (t > 1) ? 1: t;
77    return this;
78  }
79
80
81  get value () {
82    const { cos, PI, floor: int } = Math, AC = 1.5;
83    let ac = ((-cos (this.timeFraction * PI) + 1) / 2) ** AC;
84    let v = int (this.begin + (this.end - this.begin) * ac);
85    return v;
86  }
87
88  
89  static create (target) {
90    let
91      { begin, end, time } = target.dataset,
92      args = [begin, end, time].map (s=> parseInt (s, 10)),
93      obj = new this (target, ...args);
94
95    obj.start ();
96    return obj;
97  }
98}
99
100document.querySelectorAll ('.count').forEach (e=> C.create (e));
101</script>