質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.06%

circle animationが上手く動かない(タイマー作成)「addAnimation」

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 64

score 5

円形のタイマー作成上の質問です

●やりたいこと
円形のタイマーを作りたい。

●状況
タイマーを作成していて、カウント自体は実装できたのすが、
そこに1分で一周する円形の進捗を表す図形を作成する所でずっと悩んでいます。
円形(Circle)を作成してanimationをつけたのですが
アニメーションが上手く作動しません。
ちょこちょこ設定を変えてみたのですが、
丸い線に沿って、時間(1分間)と共に色が変化(くるっと一周する)しません。
ただの濃いピンクの円が表示されるのみです。
何か足りなかったり、ミスしている設定があるのでしょうか。
HTML,CSS,Jquery,Javascriptで作成しています。

下記にコードを貼りますので、何かご教示いただけますでしょうか。
よろしくお願いいたします。

※「play」ボタンを押下したら、アニメーションがスタートして
1分かけて1周する動きを想定しています。
(元々濃いピンクの円形があり、時間の経過に伴い薄いピンクになっていくイメージです)
(くるっと1周します)
下、完成イメージ図
この様にしたいです。完成予想

    <div class="wrap">
        <div id="timer">
            <!-- 円 -->
            <svg width="260" height="260">
                <circle class="defaultCircle" cx="125" cy="125" r="120" stroke="#ff88fb" stroke-width="10" fill="none" stroke-linecap="round"/>
                <circle id="animateCircle" cx="125" cy="125" r="120" stroke="#d459cb" stroke-width="10" fill="none" stroke-linecap="round" />
             </svg>

             <!-- タイマー -->
             <span id="hour">00</span>:
             <span id="minute">00</span>:
             <span id="second">00</span>:
             <span id="millisecond">00</span>
         </div>
        <p>Your time starts now</p>
        <div class="option">
            <a id="play" onclick="playFunc();" href="javascript:void(0)"><i class="fa fa-play"></i>play</a>
            <a id="stop" onclick="stopFunc();" href="javascript:void(0)"><i class="fa fa-stop"></i>STOP</a>
            <a id="reset" onclick="resetFunc();" href="javascript:void(0)"><i class="fa fa-undo"></i>reset</a>
        </div>
    </div>
*{margin: 0;padding: 0;box-sizing: border-box;}
        body{
            font-weight: 300px;
            background: linear-gradient(to left, #607d8b,#d459cb);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .wrap{
            display: inline-block;
            min-width: 360px;
            min-height: 400px;
            padding: 50px 15px;
            background-color: #fff;
            box-shadow: 0 5px 25px #0000004a;
            border-radius: 8px;
            text-align: center;
        }
        #timer{
            position: relative;
            width: 250px;
            height: 250px;
            line-height: 250px;
            border-radius: 50%;
            font-size: 32px;
            margin: 0 auto;
            background-color: #fff;
        }

        p{
            font-weight: 400;
            color: gray;
            padding: 30px 0;
        }

        .option a{
            display: inline-block;
            margin: 0 10px;
            text-decoration: none;

        }

        #play, #reset{
            width: 55px;
            height: 45px;
            line-height: 45px;
            border-radius: 50px;
            color: #fff;
            background: linear-gradient(45deg, #ff88fb, #ff00ec);
            box-shadow: 0 8px 25px #bf5fc045, 0 8px 25px #ff00ec50;
            transition: all ease 0.1s;

        }

        #stop{
            padding:15px 20px;
            border-radius: 50px;
            color: #fff;
            font-weight: 400;
            background: linear-gradient(45deg, #607d8b, #ff00ec);
            box-shadow: 0 8px 25px #bf5fc045, 0 8px 25px #ff00ec50;
            transition: all ease 0.1s;

        }
        #play:active, #reset:active, #stop:active{
            transform: scale(0.95);
        }

        .pause .fa-play,
        .fa-pause{
            display: none;
        }

        .pause .fa-pause{
            display: inline-block;
        }

        /* circle animation */
        /* 今回の該当箇所はここから下だと思います */
        #timer svg{
            position: absolute;
            left: 0;
        }

        #animateCircle.addAnimation{
            stroke-dasharray: 770;
            stroke-dashoffset: -770;
            animation: animateCircle 60s linear infinite;
            animation-play-state: paused;
        }
        @keyframes animateCircle{
            from{
                stroke-dashoffset: 0;
            }
        }

        .defaultCircle{
            opacity: .3;
        }
let base;
        let playPause = 0;

        function playFunc(){
            playPause = playPause + 1;
            if( playPause === 1){
                play();
                document.getElementById("play").classList.add("pause");
                $("#play").html("stop");
                $("#play").css("background","linear-gradient(45deg, #607d8b, #ff00ec)");
                $("#animateCircle").addClass("addAnimation");
                $("#animateCircle.addAnimation").css("animation-play-state", "running");
            }else if(playPause === 2){
                document.getElementById("play").classList.remove("pause");
                $("#play").html("play");
                $("#play").css("background", "linear-gradient(45deg, #ff88fb, #ff00ec)");
                $("#animateCircle").css("animation-play-state", "paused");  
                playPause = 0;
                stop();
            }
        }


scriptは該当箇所、HTMLとCSSは一応全部貼りました。
CSSは「circle animation」の箇所が該当です。

よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る