Flutter过渡动画插件tiktok_transitions_jm的使用
Flutter过渡动画插件tiktok_transitions_jm的使用
[![License: MIT][license_badge]][license_link]
一个用于iOS和Android的Flutter插件，可以使用video_player包创建类似TikTok的界面。
如何使用
import 'package:tiktok_transitions_jm/tiktok_transitions_jm.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
[@override](/user/override)
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final List<String> listUrl = [
'https://firebasestorage.googleapis.com/v0/b/flutterfirebaseprueba.appspot.com/o/videos_tiktok%2F4TH%20Dog%20Gangster%20%23dogs%20%23dogsports%20%23flyball.mp4?alt=media&token=333f3ac9-50f3-45a8-b15b-714208a6c6b1',
'https://firebasestorage.googleapis.com/v0/b/flutterfirebaseprueba.appspot.com/o/videos_tiktok%2FBala%20VS%20100%20metros%20de%20nieve%20%F0%9F%98%B1%20%23shorts.mp4?alt=media&token=0e09a7d0-1df3-4e2a-a1d1-418bb535f222',
'https://firebasestorage.googleapis.com/v0/b/flutterfirebaseprueba.appspot.com/o/videos_tiktok_fullhd%2Fy2meta.net_1080p-full-hd-1080p-asus-zenfone-display-demo-video-portrait-mode.mp4?alt=media&token=0aeb3319-2055-4f84-a1f7-03d9684b3708',
'https://firebasestorage.googleapis.com/v0/b/flutterfirebaseprueba.appspot.com/o/videos_tiktok%2FEl%20Mordisco%20del%20Caima%CC%81n%20Estuvo%20Tan%20Cerca.mp4?alt=media&token=0c79e933-0a87-4c4e-95a4-e7d80fae7aa5',
'https://firebasestorage.googleapis.com/v0/b/flutterfirebaseprueba.appspot.com/o/videos_tiktok%2FEste%20fue%20mi%20primer%20video%20viral%F0%9F%A5%B9%F0%9F%99%8C%F0%9F%8F%BC%F0%9F%A4%AF.mp4?alt=media&token=704e0b24-8d7e-4211-80b1-3a6bc8940564',
'https://firebasestorage.googleapis.com/v0/b/flutterfirebaseprueba.appspot.com/o/videos_tiktok%2FE%CC%81l%20no%20esperaba%20eso...%20%23parkour%20%23acrobacia%20%23comedia%20%23humor.mp4?alt=media&token=ab76c638-434d-46ab-829c-74ce2eb8bd7c',
'https://firebasestorage.googleapis.com/v0/b/flutterfirebaseprueba.appspot.com/o/videos_tiktok%2FLAMBORGHINI%20VS%20MONSTER%20Humor%20%23shorts%20%23lambo.mp4?alt=media&token=26334ed5-59fc-49f2-841f-e55ef1c2e191',
'https://firebasestorage.googleapis.com/v0/b/flutterfirebaseprueba.appspot.com/o/videos_tiktok%2FLAS%20TRAMPAS%20mas%20EFECTIVAS%20%23guerra%20de%20%23vietnam%20Y%20QUE%20DEBES%20CONOCER%20%20%23donferetv%20%23parati.mp4?alt=media&token=214c54c0-deee-49ec-93ef-42d3833dcf9a',
'https://firebasestorage.googleapis.com/v0/b/flutterfirebaseprueba.appspot.com/o/videos_tiktok%2FNunca%20tires%20Basura%20en%20un%20Volca%CC%81n%E2%9D%97%23shorts%20%23naturaleza.mp4?alt=media&token=53fb8db1-feba-4f33-8a4e-ebebfeebad49',
'https://firebasestorage.googleapis.com/v0/b/flutterfirebaseprueba.appspot.com/o/videos_tiktok%2FTOP%20SPEED%20Z%20H2%20%F0%9F%94%A5%F0%9F%94%A5%F0%9F%94%A5%20STOCK%20_ORIGINAL_.mp4?alt=media&token=d8a13f51-9fdf-4d20-9fc8-b084feb2a803',
'https://firebasestorage.googleapis.com/v0/b/flutterfirebaseprueba.appspot.com/o/videos_tiktok%2FUn%20ladro%CC%81n%20entra%20a%20ROBAR%20en%20una%20Apple%20Store%20y%20asi%CC%81%20reaccionan%20los%20empleados%E2%80%A6.mp4?alt=media&token=228b5267-ee0c-4fd3-95ea-37421de4c78a',
'https://firebasestorage.googleapis.com/v0/b/flutterfirebaseprueba.appspot.com/o/videos_tiktok%2Fvideoplayback.mp4?alt=media&token=d634a8ba-9970-4578-9d26-a52b1905bc48',
];
final List<String> likedVideos = [];
final List<String> savedVideo = [];
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: VideoPlayerManagerWidget(
loadingBuilder: (context) => Center(
child: Container(
width: 150,
height: 150,
padding: const EdgeInsets.all(5),
decoration: const BoxDecoration(
color: Colors.black87,
shape: BoxShape.circle,
),
child: Image.asset("assets/descarga.png"),
),
),
urlList: listUrl,
builder: (
context,
Widget body,
VideoPlayerModel videoPlayerModel,
) => Stack(
children: [
InkWell(
onTap: () {
if (videoPlayerModel.controller!.value.isPlaying) {
videoPlayerModel.controller!.pause();
} else {
videoPlayerModel.controller!.play();
}
},
child: body,
),
Positioned(
right: 10,
bottom: 150,
child: IconButton(
onPressed: () {
bool haveVideo =
savedVideo.contains(videoPlayerModel.urlVideo);
if (!haveVideo) savedVideo.add(videoPlayerModel.urlVideo);
if (haveVideo)
savedVideo.removeWhere(
(element) => videoPlayerModel.urlVideo == element);
setState(() {});
},
icon: Icon(
Icons.bookmark,
size: 30,
color: savedVideo.contains(videoPlayerModel.urlVideo)
? Colors.yellow
: Colors.white,
shadows: const [
Shadow(
color: Colors.black87,
offset: Offset(0, 1),
blurRadius: 10)
],
),
),
),
Positioned(
right: 10,
bottom: 100,
child: IconButton(
onPressed: () {
bool haveVideo =
likedVideos.contains(videoPlayerModel.urlVideo);
if (!haveVideo) likedVideos.add(videoPlayerModel.urlVideo);
if (haveVideo)
likedVideos.removeWhere(
(element) => videoPlayerModel.urlVideo == element);
setState(() {});
},
icon: Icon(
Icons.favorite,
size: 30,
color: likedVideos.contains(videoPlayerModel.urlVideo)
? Colors.redAccent
: Colors.white,
shadows: const [
Shadow(
color: Colors.black87,
offset: Offset(0, 1),
blurRadius: 10)
],
),
),
),
Positioned(
right: 10,
bottom: 50,
child: IconButton(
onPressed: () {},
icon: const Icon(
Icons.share,
size: 30,
color: Colors.white,
shadows: [
Shadow(
color: Colors.black87,
offset: Offset(0, 1),
blurRadius: 10)
],
),
),
),
],
),
),
);
}
}
更多关于Flutter过渡动画插件tiktok_transitions_jm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter过渡动画插件tiktok_transitions_jm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何使用 tiktok_transitions_jm 插件来实现 Flutter 过渡动画的示例代码。tiktok_transitions_jm 是一个用于创建类似 TikTok 风格的过渡动画的 Flutter 插件。
首先，确保你已经在 pubspec.yaml 文件中添加了 tiktok_transitions_jm 依赖：
dependencies:
flutter:
sdk: flutter
tiktok_transitions_jm: ^最新版本号 # 请替换为最新版本号
然后运行 flutter pub get 来获取依赖。
接下来，你可以在你的 Flutter 项目中使用这个插件。以下是一个简单的示例，展示如何在两个页面之间使用 TikTok 风格的过渡动画。
示例代码
main.dart
import 'package:flutter/material.dart';
import 'package:tiktok_transitions_jm/tiktok_transitions_jm.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TikTok Transition Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
TikTokPageRoute(
builder: (context) => SecondScreen(),
),
);
},
child: Text('Go to Second Screen'),
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: Text('Welcome to the Second Screen!'),
),
);
}
}
class TikTokPageRoute<T> extends MaterialPageRoute<T> {
TikTokPageRoute({
required WidgetBuilder builder,
RouteSettings? settings,
}) : super(
builder: builder,
settings: settings,
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return TikTokTransition(
animation: animation,
secondaryAnimation: secondaryAnimation,
child: child,
);
},
);
}
在这个示例中，我们创建了一个简单的 Flutter 应用，它有两个屏幕：HomeScreen 和 SecondScreen。我们使用 TikTokPageRoute 类来包装 Navigator.push 调用，以便在导航时使用 TikTok 风格的过渡动画。
解释
-
TikTokPageRoute 类：
- 这个类继承自
MaterialPageRoute并重写了transitionsBuilder属性。 transitionsBuilder属性允许我们自定义页面过渡动画。在这里，我们使用TikTokTransition组件来创建动画。
- 这个类继承自
-
TikTokTransition 组件：
TikTokTransition是tiktok_transitions_jm插件提供的一个组件，用于创建 TikTok 风格的过渡动画。- 我们将
animation和secondaryAnimation传递给TikTokTransition组件，以便控制动画。
-
Navigator.push：
- 使用
Navigator.push方法将TikTokPageRoute路由到SecondScreen。
- 使用
运行这个示例，当你点击按钮从 HomeScreen 导航到 SecondScreen 时，你会看到一个类似 TikTok 的过渡动画效果。
请确保你安装了最新版本的 tiktok_transitions_jm 插件，并根据需要调整代码以适应你的项目。
