Help us understand the problem. What is going on with this article?

猫のしっぽみたいなアニメーション

More than 1 year has passed since last update.

猫のしっぽみたいなアニメーションを作った。

こんな。
tail.mov.gif

目的

趣味で作っているアプリに、猫さまが登場するんですが、
動きがないと全然かわいくないので、しっぽでも動かしてみるか、という。

なんとか見るに耐えられる動きになった気がします。

環境

  • Flutter

ソース

tailState.dart
@override
  void paint(Canvas canvas, Size size) {
    Paint p = new Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 30.0;

    canvas.save();
    Path path = Path();

    // 角度(90 ~ 180)
    double angle = (value * 0.9) + 90.0;

    // ラジアンに変換
    double rad = angle * (pi / 180.0);

    // 曲げ始めの位置
    double len = value;

    // 線の開始位置
    path.moveTo(0.0, tailPosition);

    // ベジェ曲線の終了位置と、制御位置
    path.conicTo(tailLength - len, tailPosition , tailLength - len + (len * sin(rad)), (len * cos(rad)) + tailPosition, 1.3);

    // 描画する
    canvas.drawPath(path, p);

    p.style = PaintingStyle.fill;
    canvas.drawCircle(Offset(-60.0, tailPosition - 20.0), 90.0, p);

    canvas.restore();
  }

ソース全体はGithubから確認できます。

ポイント

ポイントは下記の4点。

  • ベジェ曲線を使う
  • PaintStyleがデフォルトだとfillで塗りつぶしなので、strokeにする
  • 三角関数を使うことで、しっぽ(?)全体の長さが、あんまり変わらないようにしている点
  • ベジェ曲線の制御点をアニメーションに合わせてずらしている点

これはFlutterで書いてますが、ベジェ曲線が描画できればどこにでも使えます。

本当はもっと、うねうねさせたかったですが、挫折しました。

ベジェ曲線

全然関係ありませんが、「ベジェ曲線」を日本語で発音する場合
「べ・じ・え」のように、「え」をはっきり発音するのか
「べ・じぇ」なのか、どっちなんですかね?

猫飼ったことないので

そんな動きしねーよって方は、修正お願いします。

私の成長の軌跡

ぴーん!

tail5.mov.gif
お!アニメーションしたわ!
次は曲げたろ!

ぐいーん

tail3.mov.gif
なんかしっぽ伸びてへんか。。
三角関数使ってみよ。

シャキーン!

tail2.mov.gif
猫のしっぽってこんな感じだっけ??
角度がなんかおかしいような。。

ぐるぐる

tail4.mov.gif

色々調整中。。。
ぐるぐる。。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away