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

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

ただいまの
回答率

87.49%

斜めに傾けた要素を綺麗に無限ループさせたい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,299

score 36

いつもお世話になっています。

回転させた要素を斜めに移動させたく、以下の計算式を使用することで上手くいきました。

 x += Math.cos(deg * Math.PI / 180) * 5;
 y += Math.sin(deg * Math.PI / 180) * 5;

移動させる要素がある程度進んだところで、位置を初期の方に戻し無限ループしているような表現をしたいのですが、単純に初期値を入れるだけでは切り替わりの際にガクッとズレてしまいました。

どのようにしたら綺麗につながって、ループしているように見えますでしょうか。

# 補足

  • 要素は横長の画像です。
  • 画像を一つclone()して前方に横並びとして繋げています
  • 横スライダーの斜めバージョンのようなイメージです

アドバイスの程よろしくお願いいたします。

# 補足2
言葉では上手く説明できないと思うので、やりたいことを具体的にコードにしてみました。
https://jsbin.com/wosivi/

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+1

「要素を A の位置から少しずつずらして行って B の位置まで行ったら、また A に戻す」のを
繰り返し、B から A に戻す時ガクッとしないで滑らかに見せたいということでしょうか。

滑らかに見せるには、B から A の移動を一気にしないで、逆方向に動かせばよいと思います。
+= を -= にすれば、逆方向に移動します。 * 5 の係数を大きくすれば、移動速度を速くできます。
例えば
x -= Math.cos(deg * Math.PI / 180) * 50;
とすれば、A → B の10倍の速さで B → A に移動します。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/26 15:04

    ありがとうございます!
    そうです!境界値を算出する方法が知りたかったのでした!
    境界値を少しずつ調整していけばそのうちある程度自然なループができたので、どうやってその値を出したらよいものか、と思っていました

    ですがすみません、ご提示いただきました式を当てはめてみても、やはりガクッとなってしまうようです・・・。何か根本的に間違っているのでしょうか。

    重ね重ねお手数をお掛けしますが、どうぞよろしくお願いいたします。

    ↓コード直してみました。
    https://jsbin.com/wosivi/

    キャンセル

  • 2015/06/26 16:16

    ちょっと間違っていました。
    × 境界値の値を定数 limit = -itemWidth / 2 * Math.cos(deg * Math.PI / 180 ) として

    ではなくて、初期位置からの移動距離が
    itemWidth / 2 * Math.cos(deg * Math.PI / 180 )
    となる点が境界値のはずです。
    画像が傾いていないのであれば、画像の横幅の半分 itemWidth / 2 ですが
    傾いているのでその分の係数 Math.cos(deg * Math.PI / 180 ) を掛けます。
    初期位置から ↑ の距離移動した点
    limit = 初期値 + itemWidth / 2 * Math.cos(deg * Math.PI / 180 )
    が境界値です。
    これでダメだったら、境界値以外の別の問題になってしまいます。

    三角関数の基本なので、図を書いて考えてみるとわかりやすいと思います。



    キャンセル

  • 2015/06/26 17:21

    うーん、思うようにいきません。おっしゃるとおり境界値以外の画像の切れ目とかせいかもしれません。もう少し自分なりに試してみます。

    長々とお付き合いいただきありがとうございました!

    キャンセル

0

回転とか斜めとかちょっと???状態ですが、スライダーのようなものを画像でやる場合は、スライダー幅分画像が重複している必要がありますよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/25 18:47

    ありがとうございます!
    ちょっと言葉では上手く説明できませんでしたので、補足を追加してみました。
    お手数ですが確認いただけますと幸いです!

    キャンセル

  • 2015/06/25 20:54

    loop()のif( x > -100 )をif( x > -65 )でガクッとならないかと思います。
    ただこれだと画像の幅が足りないので、足らない分の画像を追加、その際、$target.width(itemWidth * 2)などはそのままで
    これでいけると思いますがいかがでしょうか?

    キャンセル

  • 2015/06/25 21:34

    ありがとうございます!
    すみません。。2つほど質問よろしいでしょうか。

    1. 足らない分の画像を追加とは、具体的にどこにどのような処理を行えばよろしいのでしょうか。。

    2. x > -65の値ですが、こちら変数を使って汎用性を持たせることは可能でしょうか。
    回転する角度や始まる位置を柔軟に変えたい、との意図がございます。

    説明・理解力が足りずに申し訳ありません。
    よろしくお願いします。

    キャンセル

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

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

関連した質問

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