效果圖
效果圖.gif
網(wǎng)頁版（第一次打開網(wǎng)址加載會很慢）
網(wǎng)頁版
分析
總體可以拆分為2個(gè)部分：
- 循環(huán)放大縮小的 中心。
- 5個(gè)外層邊框，依次變大，同時(shí)顏色變淺, 直到變大變淺的最大值，然后重新從最小開始。
1.繪制一個(gè)循環(huán)放大縮小的中心
這里需要使用： AnimationController
//1.聲明
AnimationController _controller;
//2.初始化
_controller = AnimationController(
vsync: this,
//循環(huán)周期
duration: const Duration(seconds: 1),
//起始值
lowerBound: 60.r,
//結(jié)束值
upperBound: 100.r)
//重復(fù)循環(huán)
..repeat(reverse: true)
//添加監(jiān)聽
..addListener(() {
//更新視圖
setState(() {});
});
//3.傳遞給 圖片，讓圖片的寬高改變
Center(
child: Image.asset(
"assets/images/ic_love.png",
width: _controller.value,
height: _controller.value,
fit: BoxFit.cover,
),
)
//4.最后銷毀
@override
void dispose() {
_timer.cancel();
_controller.dispose();
super.dispose();
}
2.繪制5層邊框,循環(huán)放大，變淺。
這里需要使用到：CustomPaint,CustomPainter,Paint,Timer
//1.聲明
//邊框?qū)訉挾?List<double> borderSize;
//邊框透明度
List<double> opa;
//計(jì)時(shí)器
Timer _timer;
//2.初始化
borderSize = [20, 40, 60, 80, 100];
opa = [1, 0.8, 0.6, 0.4, 0.2];
_timer = Timer.periodic(const Duration(milliseconds: 100), (timer) {
//更新邊框?qū)挾龋该魃? ref();
});
//3.更新透明色邏輯
void ref() {
for (int i = 0; i < borderSize.length; i++) {
if (borderSize[i] < 120) {
borderSize[i] += 1;
opa[i] = double.parse((opa[i] - 0.01).toStringAsFixed(2));
} else {
opa[i] = 1.0;
borderSize[i] = 20;
}
}
}
讓寬度數(shù)組，透明色數(shù)組，依次增加、減少循環(huán)數(shù)值
image.png
image.png
2.1.繪制心形邊框代碼
class PaintBorder extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
for (int i = 0; i < borderSize.length; i++) {
var bodyColor = Color.fromRGBO(
255,
131,
115,
//透明色
double.parse(opa[i].toDouble().toStringAsFixed(2)),
);
final Paint body = Paint();
body
..color = bodyColor
..style = PaintingStyle.fill
..strokeWidth = 0;
final Paint border = Paint();
border
..color = bodyColor
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
//寬度
..strokeWidth = borderSize[i] * 2;
//繪制心形狀
final double width = size.width;
final double height = size.height;
final Path path = Path();
path.moveTo(0.5 * width, height * 0.5);
path.cubicTo(0.2 * width, -0.2 * height, -0.2 * width, height * 0.4,
0.5 * width, height * 0.8);
path.moveTo(0.5 * width, height * 0.5);
path.cubicTo(0.8 * width, -0.2 * height, 1.2 * width, height * 0.4,
0.5 * width, height * 0.8);
canvas.drawPath(path, body);
canvas.drawPath(path, border);
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
3.結(jié)合使用
return BaseRoutesWidget(
title: "跳動的心",
child: Container(
alignment: Alignment.center,
child: Stack(
children: [
Center(
child: CustomPaint(
size: Size(150.r, 150.r),
foregroundPainter: PaintBorder(),
),
),
Center(
child: Image.asset(
"assets/images/ic_love.png",
width: _controller.value,
height: _controller.value,
fit: BoxFit.cover,
),
),
],
),
));
4.整體代碼
import 'dart:async';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter1/base/base_routes_widget.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
// @description 作用:繪制一顆跳動的心
// @date: 2021/11/18
// @author: 盧融霜
class HeadTwinkle extends StatefulWidget {
const HeadTwinkle({Key key}) : super(key: key);
@override
_HeadTwinkleState createState() => _HeadTwinkleState();
}
//邊框?qū)訉挾?List<double> borderSize;
//邊框透明度
List<double> opa;
List<MaterialAccentColor> opaColor;
class _HeadTwinkleState extends State<HeadTwinkle>
with SingleTickerProviderStateMixin {
//聲明
AnimationController _controller;
//計(jì)時(shí)器
Timer _timer;
@override
void initState() {
borderSize = [20, 40, 60, 80, 100];
opa = [1, 0.8, 0.6, 0.4, 0.2];
//初始化
_controller = AnimationController(
vsync: this,
//循環(huán)周期
duration: const Duration(seconds: 1),
//起始值
lowerBound: 60.r,
//結(jié)束值
upperBound: 100.r)
//重復(fù)循環(huán)
..repeat(reverse: true)
//添加監(jiān)聽
..addListener(() {
//更新視圖
setState(() {});
});
_timer = Timer.periodic(const Duration(milliseconds: 100), (timer) {
//更新邊框?qū)挾?，透明? ref();
});
super.initState();
}
@override
void dispose() {
_timer.cancel();
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return BaseRoutesWidget(
title: "跳動的心",
child: Container(
alignment: Alignment.center,
child: Stack(
children: [
Center(
child: CustomPaint(
size: Size(150.r, 150.r),
foregroundPainter: PaintBorder(),
),
),
Center(
child: Image.asset(
"assets/images/ic_love.png",
width: _controller.value,
height: _controller.value,
fit: BoxFit.cover,
),
),
],
),
));
}
void ref() {
for (int i = 0; i < borderSize.length; i++) {
if (borderSize[i] < 120) {
borderSize[i] += 1;
opa[i] = double.parse((opa[i] - 0.01).toStringAsFixed(2));
} else {
opa[i] = 1.0;
borderSize[i] = 20;
}
}
print("borderSize:----------$borderSize");
print("borderSize:----------$borderSize");
print("opa:----------$opa");
print("");
print("");
print("");
}
}
class PaintBorder extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
for (int i = 0; i < borderSize.length; i++) {
var bodyColor = Color.fromRGBO(
255,
131,
115,
//透明色
double.parse(opa[i].toDouble().toStringAsFixed(2)),
);
final Paint body = Paint();
body
..color = bodyColor
..style = PaintingStyle.fill
..strokeWidth = 0;
final Paint border = Paint();
border
..color = bodyColor
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
//寬度
..strokeWidth = borderSize[i] * 2;
//繪制心形狀
final double width = size.width;
final double height = size.height;
final Path path = Path();
path.moveTo(0.5 * width, height * 0.5);
path.cubicTo(0.2 * width, -0.2 * height, -0.2 * width, height * 0.4,
0.5 * width, height * 0.8);
path.moveTo(0.5 * width, height * 0.5);
path.cubicTo(0.8 * width, -0.2 * height, 1.2 * width, height * 0.4,
0.5 * width, height * 0.8);
canvas.drawPath(path, body);
canvas.drawPath(path, border);
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
