Flutter 動畫鼻祖之CustomPaint_包裝設計

1{icon} {views}

※產品缺大量曝光嗎?你需要的是一流包裝設計!

窩窩觸角包含自媒體、自有平台及其他國家營銷業務等,多角化經營並具有國際觀的永續理念。

老孟導讀:CustomPaint可以稱之為動畫鼻祖,它可以實現任何酷炫的動畫和效果。CustomPaint本身沒有動畫屬性,僅僅是繪製屬性,一般情況下,CustomPaint會和動畫控制配合使用,達到理想的效果。

基本用法

CustomPaint的用法非常簡單,如下:

CustomPaint(
  painter: MyCustomPainter(),
)

MyCustomPainter定義如下:

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {}

  @override
  bool shouldRepaint(MyCustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}

上面的MyCustomPainter為了看起來清晰,什麼也沒有做,通常情況下,在paint方法內繪製自定義的效果。shouldRepaint方法通常在當前實例和舊實例屬性不一致時返回true。

paint通過canvas繪製,size為當前控件的大小,下面看看canvas的方法。

繪製點

Paint _paint = Paint()
    ..color = Colors.red
    ..strokeWidth = 3;

  @override
  void paint(Canvas canvas, Size size) {
    var points = [
      Offset(0, 0),
      Offset(size.width / 2, size.height / 2),
      Offset(size.width, size.height),
    ];
    canvas.drawPoints(PointMode.points, points, _paint);
  }

PointMode有3種模式:

  • points:點
  • lines:將2個點繪製為線段,如果點的個數為奇數,最後一個點將會被忽略
  • polygon:將整個點繪製為一條線

繪製線

canvas.drawLine(Offset(0, 0),Offset(size.width, size.height), _paint);

繪製路徑

Paint _paint = Paint()
  ..color = Colors.red
  ..style = PaintingStyle.stroke
  ..strokeWidth = 3;

@override
void paint(Canvas canvas, Size size) {
  print('size:$size');
  var _path = Path()
    ..moveTo(0, 0)
    ..lineTo(size.width, 0)
    ..lineTo(size.width, size.height)
  ..close();
  canvas.drawPath(_path, _paint);
}

這裏注意Paint.style,還可以設置為PaintingStyle.fill,效果如下:

此時Path的路徑不要在一條直線上,否則會看不到效果。

繪製各種形狀

繪製圓形

canvas.drawCircle(Offset(size.width/2, size.height/2), 20, _paint);

繪製橢圓

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

網動廣告出品的網頁設計,採用精簡與質感的CSS語法,提升企業的專業形象與簡約舒適的瀏覽體驗,讓瀏覽者第一眼就愛上她。

canvas.drawOval(Rect.fromLTRB(0, 0, size.width, size.height/2), _paint);

如果給定的Rect為正方形,那麼橢圓將會變為圓形。

繪製弧

canvas.drawArc(
    Rect.fromLTRB(0, 0, size.width, size.height), 0, pi/2, true, _paint);

繪製圓角矩形

canvas.drawRRect(
    RRect.fromLTRBR(0, 0, size.width, size.height, Radius.circular(10)), _paint)

canvas還有很多繪製函數,比如貝塞爾曲線、三次貝塞爾曲線、畫布的反轉等操作,這裏不在一一介紹。

這些函數和Android的Canvas基本一樣,如果你有Android基礎,直接套用即可。

最後奉上一個繪製玫瑰的動畫效果:

這個效果是不是很酷炫,我們看下繪製花骨朵代碼:

///
/// 繪製花骨朵
///
_drawFlower(Canvas canvas, Size size) {
  //將花變為紅色
  if (flowerPaths.length >= RoseData.flowerPoints.length) {
    var path = Path();
    for (int i = 0; i < flowerPaths.length; i++) {
      if (i == 0) {
        path.moveTo(flowerPaths[i].dx, flowerPaths[i].dy);
      } else {
        path.lineTo(flowerPaths[i].dx, flowerPaths[i].dy);
      }
    }
    _paint.style = PaintingStyle.fill;
    _paint.color = _flowerColor;
    canvas.drawPath(path, _paint);
  }
  //繪製線
  _paint.style = PaintingStyle.stroke;
  _paint.color = _strokeColor;
  //去掉最後2個點,最後2個點為了繪製紅色
  var points = flowerPaths.sublist(0, max(0, flowerPaths.length - 2));
  canvas.drawPoints(PointMode.polygon, points, _paint);
}

花骨朵的繪製只通過canvas.drawPath就實現了,其實整個玫瑰花的繪製都是通過canvas.drawPath加上動畫控制實現的。

CustomPaint可以實現任何你想要的動畫的效果,比如繪畫版就可以通過此控件實現。

獲取完整代碼方式掃碼下方二維碼回復:rose

交流

老孟Flutter博客地址(近200個控件用法):http://laomengit.com

歡迎加入Flutter交流群(微信:laomengit)、關注公眾號【老孟Flutter】:

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

南投搬家公司費用需注意的眉眉角角,別等搬了再說!

上新台中搬家公司提供您一套專業有效率且人性化的辦公室搬遷、公司行號搬家及工廠遷廠的搬家服務