【Flutter】【packages】simple_animations 简单的实现动画

在这里插入图片描述

package：simple_animations

导入包到项目中去

  • 可以实现简单的动画，
  • 快速实现，不需要自己过多的设置
  • 有多种样式可以实现
  • [ ]

功能：

简单的用例：具体需要详细可以去 pub 链接地址

1. PlayAnimationBuilder

PlayAnimationBuilder<double>(

      tween: Tween(begin: 100.0, end: 200.0), //数值是100 到00
      duration: const Duration(seconds: 1), // 动画的时间，是1s 完成动画
      builder: (context, value, _) {
        return Container(
          width: value, // 使用tween 的数值
          height: value,
          color: Colors.blue,
        );
      },
      onCompleted: () {
        // 结束的时候做什么操作
      },
      onStarted: (){
        //在开始的时候运行什么，做什么操作
      },
    )

新增child 参数，静态的child ,减少资源的浪费，其他的build 同样可以这样使用

PlayAnimationBuilder<double>(
      tween: Tween(begin: 50.0, end: 200.0),
      duration: const Duration(seconds: 5),
      child: const Center(child: Text('Hello!')), // pass in static child
      builder: (context, value, child) {
        return Container(
          width: value,
          height: value,
          color: Colors.green,
          child: child, // use child inside the animation
        );
      },
    )

2.LoopAnimationBuilder 循环动画

该用例，是一个正方形旋转360度，并且持续的转动

Center(
      child: LoopAnimationBuilder<double>(
        tween: Tween(begin: 0.0, end: 2 * pi), // 0° to 360° (2π)
        duration: const Duration(seconds: 2), // for 2 seconds per iteration
        builder: (context, value, _) {
          return Transform.rotate(
            angle: value, // use value
            child: Container(color: Colors.blue, width: 100, height: 100),
          );
        },
      ),
    )

3.MirrorAnimationBuilder 镜像动画

        MirrorAnimationBuilder<double>(
          tween:
              Tween(begin: -100.0, end: 100.0), // x 轴的数值
          duration: const Duration(seconds: 2),//动画时间
          curve: Curves.easeInOutSine, // 动画曲线
          builder: (context, value, child) {
            return Transform.translate(
              offset: Offset(value, 0), // use animated value for x-coordinate
              child: child,
            );
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.green,
          ),
        )

4.CustomAnimationBuilder 自定义动画，可以在stl 无状态里面使用

        CustomAnimationBuilder<double>(
          control: Control.mirror,
          tween: Tween(begin: 100.0, end: 200.0),
          duration: const Duration(seconds: 2),
          delay: const Duration(seconds: 1),//延迟1s才开始动画
          curve: Curves.easeInOut,
          startPosition: 0.5,
          animationStatusListener: (status) {
          //状态的监听，可以在这边做一些操作
            debugPrint('status updated: $status');
          },
          builder: (context, value, child) {
            return Container(
              width: value,
              height: value,
              color: Colors.blue,
              child: child,
            );
          },
          child: const Center(
              child: Text('Hello!',
                  style: TextStyle(color: Colors.white, fontSize: 24))),
        )

带控制器

        CustomAnimationBuilder<double>(
          duration: const Duration(seconds: 1),
          control: control, // bind state variable to parameter
          tween: Tween(begin: -100.0, end: 100.0),
          builder: (context, value, child) {
            return Transform.translate(
              // animation that moves childs from left to right
              offset: Offset(value, 0),
              child: child,
            );
          },
          child: MaterialButton(
            // there is a button
            color: Colors.yellow,
            onPressed: () {
              setState(() {
                control = (control == Control.play)
                    ? Control.playReverse
                    : Control.play;
              });
            }, // clicking button changes animation direction
            child: const Text('Swap'),
          ),
        )

5.MovieTween 补间动画，可并行的动画

可以一个widget 多个动画同时或者不同时的运行

final MovieTween tween = MovieTween()
  ..scene(
          begin: const Duration(milliseconds: 0),
          end: const Duration(milliseconds: 1000))
      .tween('width', Tween(begin: 0.0, end: 100.0)) //0-1秒的的 width 的数值
  ..scene(
          begin: const Duration(milliseconds: 1000),
          end: const Duration(milliseconds: 1500))
      .tween('width', Tween(begin: 100.0, end: 200.0)) //1-1。5秒的的 width 的数值
  ..scene(
          begin: const Duration(milliseconds: 0),
          duration: const Duration(milliseconds: 2500))
      .tween('height', Tween(begin: 0.0, end: 200.0)) //0-2.5秒的的 height 的数值
  ..scene(
          begin: const Duration(milliseconds: 0),
          duration: const Duration(milliseconds: 3000)) //0-3 秒的的 颜色 的数值
      .tween('color', ColorTween(begin: Colors.red, end: Colors.blue));




 PlayAnimationBuilder<Movie>(
   tween: tween, // Pass in tween
   duration: tween.duration, // Obtain duration
   builder: (context, value, child) {
     return Container(
       width: value.get('width'), // Get animated values
       height: value.get('height'),
       color: value.get('color'),
     );
   },
 ),

6.MovieTween 串行的动画补间

简单的意思就是，按照设计的动画一个一个执行，按照顺序来执行，可以设置不同的数值或者是参数来获取，然后改变动画

final signaltween = MovieTween()
  ..tween('x', Tween(begin: -100.0, end: 100.0),
          duration: const Duration(seconds: 1))
      .thenTween('y', Tween(begin: -100.0, end: 100.0),
          duration: const Duration(seconds: 1))
      .thenTween('x', Tween(begin: 100.0, end: -100.0),
          duration: const Duration(seconds: 1))
      .thenTween('y', Tween(begin: 100.0, end: -100.0),
          duration: const Duration(seconds: 1));


LoopAnimationBuilder<Movie>(
  tween: signaltween,
  builder: (ctx, value, chid) {
    return Transform.translate(
        offset: Offset(value.get('x'), value.get('y')),
        child: Container(
          width: 100,
          height: 100,
          color: Colors.green,
        ));
  },
  duration: signaltween.duration,
),

总的代码：

import 'dart:math';

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

void main() {
  runApp(const MaterialApp(home: Scaffold(body: MyPage())));
}

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  Control control = Control.play; // state variable

  void toggleDirection() {
    // toggle between control instructions
    setState(() {
      control = (control == Control.play) ? Control.playReverse : Control.play;
    });
  }

  @override
  Widget build(BuildContext context) {
//电影样式的动画
    final MovieTween tween = MovieTween()
      ..scene(
              begin: const Duration(milliseconds: 0),
              end: const Duration(milliseconds: 1000))
          .tween('width', Tween(begin: 0.0, end: 100.0)) //0-1秒的的 width 的数值
      ..scene(
              begin: const Duration(milliseconds: 1000),
              end: const Duration(milliseconds: 1500))
          .tween('width', Tween(begin: 100.0, end: 200.0)) //1-1。5秒的的 width 的数值
      ..scene(
              begin: const Duration(milliseconds: 0),
              duration: const Duration(milliseconds: 2500))
          .tween('height', Tween(begin: 0.0, end: 200.0)) //0-2.5秒的的 height 的数值
      ..scene(
              begin: const Duration(milliseconds: 0),
              duration: const Duration(milliseconds: 3000)) //0-3 秒的的 颜色 的数值
          .tween('color', ColorTween(begin: Colors.red, end: Colors.blue));

    final signaltween = MovieTween()
      ..tween('x', Tween(begin: -100.0, end: 100.0),
              duration: const Duration(seconds: 1))
          .thenTween('y', Tween(begin: -100.0, end: 100.0),
              duration: const Duration(seconds: 1))
          .thenTween('x', Tween(begin: 100.0, end: -100.0),
              duration: const Duration(seconds: 1))
          .thenTween('y', Tween(begin: 100.0, end: -100.0),
              duration: const Duration(seconds: 1));

    return SingleChildScrollView(
      child: Column(
        children: [
          LoopAnimationBuilder<Movie>(
            tween: signaltween,
            builder: (ctx, value, chid) {
              return Transform.translate(
                  offset: Offset(value.get('x'), value.get('y')),
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                  ));
            },
            duration: signaltween.duration,
          ),

          PlayAnimationBuilder<Movie>(
            tween: tween, // Pass in tween
            duration: tween.duration, // Obtain duration
            builder: (context, value, child) {
              return Container(
                width: value.get('width'), // Get animated values
                height: value.get('height'),
                color: value.get('color'),
              );
            },
          ),
          PlayAnimationBuilder<double>(
            tween: Tween(begin: 100.0, end: 200.0), //数值是100 到00
            duration: const Duration(seconds: 1), // 动画的时间，是1s 完成动画
            builder: (context, value, _) {
              return Container(
                width: value, // 使用tween 的数值
                height: value,
                color: Colors.blue,
              );
            },
            onCompleted: () {
              // 结束的时候做什么操作
            },
            onStarted: () {
              //在开始的时候运行什么，做什么操作
            },
          ),
          MirrorAnimationBuilder<Color?>(
            tween:
                ColorTween(begin: Colors.red, end: Colors.blue), // 颜色的渐变 红色到蓝色
            duration: const Duration(seconds: 5), // 动画时长5秒
            builder: (context, value, _) {
              return Container(
                color: value, // 使用该数值
                width: 100,
                height: 100,
              );
            },
          ),

          //实现一个绿色箱子从左到右，从右到走
          MirrorAnimationBuilder<double>(
            tween: Tween(begin: -100.0, end: 100.0), // x 轴的数值
            duration: const Duration(seconds: 2), //动画时间
            curve: Curves.easeInOutSine, // 动画曲线
            builder: (context, value, child) {
              return Transform.translate(
                offset: Offset(value, 0), // use animated value for x-coordinate
                child: child,
              );
            },
            child: Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
          ),
          CustomAnimationBuilder<double>(
            control: Control.mirror,
            tween: Tween(begin: 100.0, end: 200.0),
            duration: const Duration(seconds: 2),
            delay: const Duration(seconds: 1),
            curve: Curves.easeInOut,
            startPosition: 0.5,
            animationStatusListener: (status) {
              debugPrint('status updated: $status');
            },
            builder: (context, value, child) {
              return Container(
                width: value,
                height: value,
                color: Colors.blue,
                child: child,
              );
            },
            child: const Center(
                child: Text('Hello!',
                    style: TextStyle(color: Colors.white, fontSize: 24))),
          ),

          CustomAnimationBuilder<double>(
            duration: const Duration(seconds: 1),
            control: control, // bind state variable to parameter
            tween: Tween(begin: -100.0, end: 100.0),
            builder: (context, value, child) {
              return Transform.translate(
                // animation that moves childs from left to right
                offset: Offset(value, 0),
                child: child,
              );
            },
            child: MaterialButton(
              // there is a button
              color: Colors.yellow,
              onPressed: () {
                setState(() {
                  control = (control == Control.play)
                      ? Control.playReverse
                      : Control.play;
                });
              }, // clicking button changes animation direction
              child: const Text('Swap'),
            ),
          )
        ],
      ),
    );
  }
}

混合多种动画

import 'dart:math';

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

void main() {
  runApp(const MaterialApp(home: Scaffold(body: MyPage())));
}

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  Control control = Control.play; // state variable

  @override
  Widget build(BuildContext context) {
    final x = MovieTweenProperty<double>();
    final y = MovieTweenProperty<double>();
    final color = MovieTweenProperty<Color>();
    final tween = MovieTween()
      ..scene(
              begin: const Duration(seconds: 0),
              duration: const Duration(seconds: 1))
          .tween(x, Tween(begin: -100.0, end: 100.0),
              curve: Curves.easeInOutSine)
          .tween(color, ColorTween(begin: Colors.red, end: Colors.yellow))
      ..scene(
              begin: const Duration(seconds: 1),
              duration: const Duration(seconds: 1))
          .tween(y, Tween(begin: -100.0, end: 100.0),
              curve: Curves.easeInOutSine)
      ..scene(
              begin: const Duration(seconds: 2),
              duration: const Duration(seconds: 1))
          .tween(x, Tween(begin: 100.0, end: -100.0),
              curve: Curves.easeInOutSine)
      ..scene(
              begin: const Duration(seconds: 1),
              end: const Duration(seconds: 3))
          .tween(color, ColorTween(begin: Colors.yellow, end: Colors.blue))
      ..scene(
              begin: const Duration(seconds: 3),
              duration: const Duration(seconds: 1))
          .tween(y, Tween(begin: 100.0, end: -100.0),
              curve: Curves.easeInOutSine)
          .tween(color, ColorTween(begin: Colors.blue, end: Colors.red));

    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: LoopAnimationBuilder<Movie>(
            tween: tween, // Pass in tween
            duration: tween.duration, // Obtain duration
            builder: (context, value, child) {
              return Transform.translate(
                // Get animated offset
                offset: Offset(x.from(value), y.from(value)),
                child: Container(
                  width: 100,
                  height: 100,
                  color: color.from(value), // Get animated color
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

边运动便改变颜色

同原生的动画混合开发

以下代码实现，一个container 的宽高的尺寸变化

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with AnimationMixin {
  //同原生的混合使用
  // Control control = Control.play; // state variable
  late Animation<double> size;

  @override
  void initState() {
    super.initState();
    // controller 不需要重新定义，AnimationMixin 里面已经自动定义了个
    size = Tween(begin: 0.0, end: 200.0).animate(controller);
    controller.play(); //运行
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Container(
            width: size.value,
            height: size.value,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

实现图

多个控制器控制一个widget的实现多维度的动画实现

import 'dart:math';

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

void main() {
  runApp(const MaterialApp(home: Scaffold(body: MyPage())));
}

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with AnimationMixin {
  //同原生的混合使用

  late AnimationController widthcontrol; //宽度控制
  late AnimationController heigthcontrol; //高度控制器
  late AnimationController colorcontrol; //颜色控制器

  late Animation<double> width; //宽度控制
  late Animation<double> heigth; //高度控制
  late Animation<Color?> color; //颜色控制

  @override
  void initState() {
// mirror 镜像
    widthcontrol = createController()
      ..mirror(duration: const Duration(seconds: 5));
    heigthcontrol = createController()
      ..mirror(duration: const Duration(seconds: 3));
    colorcontrol = createController()
      ..mirror(duration: const Duration(milliseconds: 1500));

    width = Tween(begin: 100.0, end: 200.0).animate(widthcontrol);
    heigth = Tween(begin: 100.0, end: 200.0).animate(heigthcontrol);
    color = ColorTween(begin: Colors.green, end: Colors.black)
        .animate(colorcontrol);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Container(
            width: width.value,
            height: heigth.value,
            color: color.value,
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/70829.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Dockerfile部署golang，docker-compose

Dockerfile部署golang，docker-compose

使用go镜像打包&#xff0c;运行在容器内 redis和mysql用外部的 项目目录结构 w1go项目&#xff1a; Dockerfile # 这种方式是docker项目加上 本地的mysql和redis环境 # go打包的容器 FROM golang:alpine AS builder# 为我们镜像设置一些必要的环境变量 ENV GO111MODULEon …
阅读更多...
对于生产者消费者/shutdown/close的补充

对于生产者消费者/shutdown/close的补充

信号量解决生产者消费者/读写者问题_右大臣的博客-CSDN博客 一点补充 模拟简单的string&#xff0c;循环队列&#xff0c;vector_右大臣的博客-CSDN博客 补充总结 写一个循环队列 用个循环队列去表示class myqueue{ vector<int>qq capacity 容量 front 头 rear 尾…
阅读更多...
【Linux命令详解 | chmod命令】 chmod命令用于修改文件或目录的权限，保护文件安全性。

【Linux命令详解 | chmod命令】 chmod命令用于修改文件或目录的权限，保护文件安全性。

文章目录 简介一&#xff0c;参数列表二&#xff0c;使用介绍1. 修改用户权限2. 修改用户组权限3. 修改其他用户权限4. 同时修改多个权限5. 使用数字模式设置权限6. 递归修改目录权限 总结 简介 在Ubuntu系统中&#xff0c;chmod命令是一个强大的工具&#xff0c;用于修改文件…
阅读更多...
数学建模（一）前继概念

数学建模（一）前继概念

课程推荐&#xff1a;数学建模老哥_哔哩哔哩_bilibili 目录 一、什么是数学建模&#xff1f; 二、数学建模的一般步骤 三、数学建模赛题类型 1.预测型 2. 评价类 3.机理分析类 4. 优化类 一、什么是数学建模&#xff1f; 数学建模是利用数学方法解决实际问题的一种实践。…
阅读更多...
Nuitka实战

Nuitka实战

安装Nuitka pip install -U nuitka 安装好之后查看版本 python -m nuitka --version 显示gcc版本太低&#xff0c;与nuitka不兼容&#xff0c;所以我们要升级gcc版本 升级之前&#xff0c;先查看一下gcc版本信息 gcc --version 可以看到&#xff0c;Centos 7.7默认gcc版本为…
阅读更多...
深度学习（37）—— 图神经网络GNN（2）

深度学习（37）—— 图神经网络GNN（2）

深度学习&#xff08;37&#xff09;—— 图神经网络GNN&#xff08;2&#xff09; 这一期主要是一些简单示例&#xff0c;针对不同的情况&#xff0c;使用的数据都是torch_geometric的内置数据集 文章目录 深度学习&#xff08;37&#xff09;—— 图神经网络GNN&#xff08…
阅读更多...
SpringMVC 的基本概念（一）

SpringMVC 的基本概念（一）

1.1 关于三层架构和 MVC 1.1.1 三层架构 我们的开发架构一般都是基于两种形式&#xff0c;一种是 C/S 架构&#xff0c;也就是客户端 / 服务器&#xff0c;另一种是 B/S 架构&#xff0c;也就 是浏览器服务器。在 JavaEE 开发中&#xff0c;几乎全都是基于 B/S 架构…
阅读更多...
逆向破解学习-登山赛车

逆向破解学习-登山赛车

试玩 课程中的内容 Hook代码 import de.robv.android.xposed.XC_MethodHook; import de.robv.android.xposed.XposedHelpers; import de.robv.android.xposed.callbacks.XC_LoadPackage;public class HookComYoDo1SkiSafari2TXYYB_01 extends HookImpl{Overridepublic String p…
阅读更多...
HTML详解连载（3）

HTML详解连载（3）

HTML详解连载&#xff08;3&#xff09; 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽表单作用使用场景 input标签基本使用示例type属性值以及说明 input标签占位文本示例注意 单选框 radio代码示例 多选框-checkbox注意代码示例 文本域作用标签&#xff1…
阅读更多...
软考笔记 信息管理师 高级

软考笔记 信息管理师 高级

文章目录 介绍考试内容与时间教材 预习课程一些例子课本结构考试内容 1 信息与信息化1.1 信息与信息化1.1.1 信息1.1.2 信息系统1.1.3 信息化 1.2 现代化基础设施1.2.1 新型基础建设1.2.2 工业互联网1.2.3 车联网&#xff1a; 1.3 现代化创新发展1.3.1 农业农村现代化1.3.2 两化…
阅读更多...
STM32 F103C8T6学习笔记2：GPIO的认识—GPIO的基本输入输出—点亮一个LED

STM32 F103C8T6学习笔记2：GPIO的认识—GPIO的基本输入输出—点亮一个LED

今日继续学习使用 STM32 F103C8T6开发板 点亮一个LED灯&#xff0c;文章提供源码&#xff0c;测试工程&#xff0c;实验效果图&#xff0c;希望我的归纳总结会对大家有帮助~ 目录 GPIO的认识与分类 &#xff1a; 引脚安排整理&#xff1a; 定时器的引脚例举&#xff1a; …
阅读更多...
小内存嵌入式设备软件的差分升级设计（学习）

小内存嵌入式设备软件的差分升级设计（学习）

摘要 提出一种改进HDiffPatch算法并在复旦微单片机上实现小内存差分升级的方案&#xff0c;即使用单片机内的Flash空间替代算法占用的RAM空间&#xff0c;从而减少算法对单片机RAM空间的需求&#xff0c;以满足小内存微处理器的差分升级&#xff0c;同时对算法内存分配释放函数…
阅读更多...
JDK、JRE、JVM：揭秘Java的关键三者关系

JDK、JRE、JVM：揭秘Java的关键三者关系

文章目录 JDK&#xff1a;Java开发工具包JRE&#xff1a;Java运行环境JVM&#xff1a;Java虚拟机关系概述 案例示例&#xff1a;Hello World结语 在Java世界中&#xff0c;你可能经常听到JDK、JRE和JVM这几个概念&#xff0c;它们分别代表了Java开发工具包、Java运行环境和Java…
阅读更多...
多线程的同步与互斥

多线程的同步与互斥

文章目录 线程安全问题多线程互斥互斥量mutex互斥锁的使用理解锁加锁如何做到原子性对mutex做封装 可重入与线程安全死锁 线程同步条件变量条件变量函数接口理解条件变量条件变量的使用 线程安全问题 首先来看一段代码&#xff0c;该代码是一个多线程抢票的逻辑 #include<…
阅读更多...
Python爬虫在框架下的合规操作与风险控制

Python爬虫在框架下的合规操作与风险控制

大家好&#xff01;作为一名专业的爬虫代理供应商&#xff0c;我今天要和大家分享一些关于Python爬虫在法律框架下的合规操作与风险控制的知识。随着互联网的发展&#xff0c;数据爬取在商业和研究领域扮演着重要的角色&#xff0c;但我们也必须遵守相关法律和规定&#xff0c;…
阅读更多...
交换排序——选择排序和冒泡排序的区别是什么？

交换排序——选择排序和冒泡排序的区别是什么？

今天重温一下算法&#xff0c;其实刚开始我觉得冒泡排序和选择排序是一样的&#xff0c;因为他们排序过程中都是通过相邻的数据比较找到最小/最大的数据&#xff0c;通过不断思考和学习才明白&#xff0c;两者还是有区别的。 冒泡排序 概念 冒泡排序(Bubble Sort)&#xff0…
阅读更多...
JVM之内存模型

JVM之内存模型

1. Java内存模型 很多人将Java 内存结构与java 内存模型傻傻分不清&#xff0c;java 内存模型是 Java Memory Model&#xff08;JMM&#xff09;的意思。 简单的说&#xff0c;JMM 定义了一套在多线程读写共享数据时&#xff08;成员变量、数组&#xff09;时&#xff0c;对数据…
阅读更多...
Grafana技术文档--基本安装-docker安装并挂载数据卷-《十分钟搭建》-附带监控服务器

Grafana技术文档--基本安装-docker安装并挂载数据卷-《十分钟搭建》-附带监控服务器

阿丹&#xff1a; Prometheus技术文档--基本安装-docker安装并挂载数据卷-《十分钟搭建》_一单成的博客-CSDN博客 在正确安装了Prometheus之后开始使用并安装Grafana作为Prometheus的仪表盘。 一、拉取镜像 搜索可拉取版本 docker search Grafana拉取镜像 docker pull gra…
阅读更多...
AI绘画（1）stable diffusion安装教程

AI绘画（1）stable diffusion安装教程

1、引言 stable diffusion 是一款免费开源的AI绘画工具&#xff0c;它能够帮助任何人轻松地进行绘画创作。不论你是有绘画基础还是完全没有经验&#xff0c;stable diffusion 都能让你在数字画布上释放创造力。 stable diffusion 提供了丰富多样的绘画工具和选项&#xff0c;…
阅读更多...
Centos7源码安装redis

Centos7源码安装redis

1、下载redis Index of /releases/ 2、解压redis tar -xvf redis-6.2.9.tar.gz 3、进入解压后的目录 cd redis-6.2.9/4、指定内存分配器为 libc make MALLOClibc 5、进入src目录&#xff0c;安装 cd src && make install6、运行 ./redis-server 7、添加开机…
阅读更多...
最新文章

Copyright @ 2022~2023