Flutter肯伯恩斯效果插件kenburns_nullsafety的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter肯伯恩斯效果插件kenburns_nullsafety的使用

KenBurns 效果简介

Ken Burns 效果是一种在视频制作中使用的从静态图像生成平移和缩放效果的技术。通过使用 kenburns_nullsafety 插件，开发者可以在 Flutter 应用中轻松地为图片添加这种动态效果。

添加依赖项

首先，在项目的 pubspec.yaml 文件中添加 kenburns_nullsafety 作为依赖项：

dependencies:
  kenburns_nullsafety:

然后执行 flutter pub get 命令来安装新添加的包。

导入库

接下来，在 Dart 文件顶部导入该库：

import 'package:kenburns_nullsafety/kenburns_nullsafety.dart';

使用单张图片

将您的图片包装在一个 KenBurns 小部件中以应用 Ken Burns 效果：

Container(
  height: 300,
  child: KenBurns(
    child: Image.network("https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg", fit: BoxFit.cover,),
  ),
),

配置 KenBurns Widget

您可以自定义 KenBurns 小部件的行为，例如设置最小和最大动画持续时间以及最大缩放比例：

KenBurns(
  minAnimationDuration : Duration(milliseconds: 3000),
  maxAnimationDuration : Duration(milliseconds: 10000),
  maxScale : 8,
  child: ...
);

多张图片展示

要显示多个子组件并带有交错淡入淡出动画，可以使用 KenBurns.multiple 方法：

Container(
  height: 300,
  child: KenBurns.multiple(
    childLoop: 3, // 每个图片循环次数
    children: [
      Image.network(
        "https://www.photo-paysage.com/?file=pic_download_link/picture&pid=3100",
        fit: BoxFit.cover,
      ),
      Image.network(
        "https://cdn.getyourguide.com/img/location_img-59-1969619245-148.jpg",
        fit: BoxFit.cover,
      ),
      Image.network(
        "https://www.theglobeandmail.com/resizer/vq3O7LI3hvsjTP2N0m9NwU4W3Eg=/1500x0/filters:quality(80)/arc-anglerfish-tgam-prod-tgam.s3.amazonaws.com/public/4ETF3GZR3NA3RDDW23XDRBKKCI",
        fit: BoxFit.cover,
      ),
    ],
  ),
),

完整示例代码

以下是一个完整的示例应用程序，展示了如何结合上述所有功能创建一个包含 Ken Burns 动画的 Flutter 应用程序：

import 'package:flutter/material.dart';
import 'package:kenburns_nullsafety/kenburns_nullsafety.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Ken Burns Effect Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(30.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                height: 300,
                child: KenBurns.multiple(
                  maxAnimationDuration: Duration(seconds: 10),
                  minAnimationDuration: Duration(seconds: 3),
                  children: <Widget>[
                    Image.network(
                      "https://cdn.hasselblad.com/hasselblad-com/6cb604081ef3086569319ddb5adcae66298a28c5_x1d-ii-sample-01-web.jpg?auto=format&q=97",
                      fit: BoxFit.cover,
                    ),
                    Image.network(
                      "https://cdn.getyourguide.com/img/location_img-59-1969619245-148.jpg",
                      fit: BoxFit.cover,
                    ),
                    Image.network(
                      "https://www.theglobeandmail.com/resizer/vq3O7LI3hvsjTP2N0m9NwU4W3Eg=/1500x0/filters:quality(80)/arc-anglerfish-tgam-prod-tgam.s3.amazonaws.com/public/4ETF3GZR3NA3RDDW23XDRBKKCI",
                      fit: BoxFit.cover,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

此代码段创建了一个简单的 Flutter 应用程序，其中包含一个具有 Ken Burns 效果的多张图片轮播器。您可以通过调整参数来自定义动画行为，或者根据需要更改所使用的图片资源。


更多关于Flutter肯伯恩斯效果插件kenburns_nullsafety的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter肯伯恩斯效果插件kenburns_nullsafety的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用kenburns_nullsafety插件来实现肯伯恩斯效果（Ken Burns Effect）的代码示例。这个插件允许你在图像上应用平滑的缩放和平移动画，从而模拟类似肯·伯恩斯（Ken Burns）在纪录片中所使用的动态图像效果。

首先，你需要在你的pubspec.yaml文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  kenburns_nullsafety: ^x.y.z  # 替换为最新的版本号

然后运行flutter pub get来安装依赖项。

接下来，你可以在你的Flutter应用中使用这个插件。以下是一个简单的示例，展示了如何在Scaffold中显示一个具有肯伯恩斯效果的图像：

import 'package:flutter/material.dart';
import 'package:kenburns_nullsafety/kenburns_nullsafety.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ken Burns Effect Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: KenBurnsDemo(),
    );
  }
}

class KenBurnsDemo extends StatefulWidget {
  @override
  _KenBurnsDemoState createState() => _KenBurnsDemoState();
}

class _KenBurnsDemoState extends State<KenBurnsDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ken Burns Effect Demo'),
      ),
      body: Center(
        child: KenBurns(
          image: NetworkImage('https://example.com/your-image.jpg'), // 替换为你的图片URL
          duration: Duration(seconds: 10), // 动画持续时间
          alignment: Alignment.center,
          frameCount: 30,
          fit: BoxFit.cover,
          width: double.infinity,
          height: double.infinity,
        ),
      ),
    );
  }
}

在这个示例中：

  1. KenBurns 组件用于显示具有肯伯恩斯效果的图像。
  2. image 属性接受一个ImageProvider，这里我们使用的是NetworkImage，你可以根据需要替换为本地图片或其他图片提供方式。
  3. duration 属性定义了动画的持续时间。
  4. alignment 属性定义了图像在容器中的对齐方式。
  5. frameCount 属性定义了动画的帧数，这会影响动画的平滑度。
  6. fit 属性定义了图像如何适应其容器。
  7. width 和 height 属性定义了组件的宽度和高度。

请确保将https://example.com/your-image.jpg替换为你实际要使用的图片URL。

这个简单的示例展示了如何使用kenburns_nullsafety插件来创建肯伯恩斯效果。你可以根据需要进一步自定义和扩展这个示例。

回到顶部