基于react native的图片放大旋转效果二

基于react native的图片放大旋转效果二

在这里插入图片描述

const TaskReceiveModal = ({ onClick }) => {const spinValue = useRef(new Animated.Value(0)).current;const scaleValue = useRef(new Animated.Value(0)).current;const spinAnimation = useRef(null);const spin = spinValue.interpolate({inputRange: [0, 1],outputRange: ['0deg', '360deg']});const animate = () => {scaleValue.setValue(0);Animated.timing(scaleValue, {toValue: 1,duration: 1000,easing: Easing.in(Easing.bounce),useNativeDriver: true}).start(() => { });startSpinAnimation();};const startSpinAnimation = () => {spinValue.setValue(0);spinAnimation.current = Animated.timing(spinValue, {toValue: 1,duration: 1500,easing: Easing.linear,useNativeDriver: true});spinAnimation.current.start(({ finished }) => {if (finished) {spinAnimation.current.stop();}});};const coloseHandle = () => {onClick && onClick();}useEffect(() => {animate();return () => {}}, []);return (<><View style={styles.taskReceive}><Animated.View style={[{transform: [{ scale: scaleValue }]}]}><View style={styles.receiveBlock}><ImageBackground style={styles.receiveBg} source={require('../../../common/images/dressup_pupop_bg.png')} /><View style={styles.receiveContent}><View style={{ width: '100%', height: pxToPd(44) }}></View><View style={styles.receiveTitile}><Text style={styles.receiveTitileTxt}>恭喜你获得徽章</Text></View><View style={{ width: '100%', height: pxToPd(22) }}></View><View style={styles.receiveBox}><Animated.Image style={[styles.taskReceiveIcon, {transform: [{ rotateY: spin },]}]} source={require('../../../common/images/badge_temp_logo.png')}></Animated.Image></View><View style={{ width: '100%', height: pxToPd(22) }}></View><View style={styles.receiveFooter}><CustomeBtn name={'确认'} width={500} onClick={coloseHandle} /></View></View></View></Animated.View></View></>)
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务架构-微服务治理基础

目录 一、服务治理由来 1.1 概述 1.2 微服务治理的几个维度 1.2.1 服务定义和SLA 1.2.2 服务注册中心 1.2.3 服务生命周期管理 1.2.4 服务通信和链路治理 1.2.5 服务授权和通信安全 二、服务治理的目标与愿景 2.1 服务治理的愿景 2.2 服务治理的目标 2.2.1 标准化 …

墨天轮《2023年中国数据库行业年度分析报告》正式发布!

为明晰发展脉络&#xff0c;把握未来趋势&#xff0c;墨天轮于5月29日正式发布 《2023年中国数据库年度行业分析报告》。该报告由墨天轮联合业界专家学者共同编写&#xff0c;共330页&#xff0c;旨在梳理和洞察中国数据库行业的发展趋势、技术创新、市场动态以及面临的挑战&am…

Java-集合基础

集合 一、含义 集合是Java API所提供的一系列类&#xff0c;可以用于动态存放多个对象 (集合只能存对象)集合与数组的不同在于&#xff0c;集合是大小可变的序列&#xff0c;而且元素类型可以不受限定&#xff0c;只要是引用类型。(集合中不能放基本数据类型&#xff0c;但可以…

Source Insight 变量高亮快捷键F8 失效

SourceInsight4.0&#xff0c;使用的时候&#xff0c;高亮快捷键F8突然不能用了 查半天发现&#xff0c;是用了“有道翻译”的原因&#xff0c;热键冲突&#xff0c;如下&#xff0c;把下面的热键换一个就好了

中国商业化重水需求依赖进口满足 国内行业发展前景广阔

中国商业化重水需求依赖进口满足 国内行业发展前景广阔 重水又称氘化水或氘水&#xff0c;是水的一种&#xff0c;常温常压下为无色无味液体&#xff0c;它的摩尔质量比一般水要重。普通的水是由两个只具有质子的氢原子和一个氧16原子所组成&#xff0c;但在重水分子内的两个氢…

mac安装allure及allure:command not fund问题解决

一、下载 下载连接&#xff1a;https://github.com/allure-framework/allure2/releases 选择任意压缩包进行下载 二、解压 解压后是一个文件夹 三、打开终端 # bash终端 vim ~/.bash_profile # zsh终端 vim ~/.zshrc四、配置环境变量 export PATH/usr/bin:/bin:/usr/sb…

Flink系列二:DataStream API中的Source,Transformation,Sink详解(^_^)

在上面篇文章中已经对flink进行了简单的介绍以及了解了Flink API 层级划分&#xff0c;这一章内容我们主要介绍DataStream API 流程图解&#xff1a; 一、DataStream API Source Flink 在流处理和批处理上的 source 大概有 4 类&#xff1a; &#xff08;1&#xff09;基于本…

Python网页处理与爬虫实战:使用Requests库进行网页数据抓取

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

【前端】Vuex笔记(超详细!!)

最近花了两周时间&#xff0c;完完全全的跟着Vuex官方的视频学完了Vuex并且详详细细的做了笔记&#xff0c;其中总结部分是我对于整个视频课程的总结&#xff0c;视频部分是跟着视频做的笔记&#xff0c;如果总结部分有不懂的话&#xff0c;直接去视频部分查找对应的笔记即可&a…

ios:文本框默认的copy、past改成中文复制粘贴

问题 ios 开发&#xff0c;对于输入框的一些默认文案展示&#xff0c;如复制粘贴是英文的&#xff0c;那么如何改为中文的呢 解决 按照路径找到这个文件 ios/项目/Info.plist&#xff0c;增加 <key>CFBundleAllowMixedLocalizations</key> <true/> <…

Keras深度学习框架实战(1):图像分类识别

1、绪论 1.1 图像分类的定义 图像分类是计算机视觉领域中的一项基本任务&#xff0c;其定义是将输入图像分配给预定义类别中的一个或多个。具体来说&#xff0c;图像分类系统接受一个图像作为输入&#xff0c;并输出一个或多个类别标签&#xff0c;这些标签描述了图像中的内容…

第十三届蓝桥杯物联网试题(国赛)

还是那句话不能掉以轻心&#xff0c;全力以赴吧&#xff0c;遇事不要慌&#xff0c;该做的都做了&#xff0c;冷静沉稳的处理&#xff0c;看看配置&#xff0c;看看代码&#xff0c;还是不行就重启&#xff0c;都没问题换个板子 下面对比较复杂的部分的处理过程进行展现&#x…

git报错prohibited by Gerrit: not permitted: update

git push报错&#xff1a; Push to refs/for/[branch] to create a review, or get Push rights to update the branch. Contact an administrator to fix the permissions (prohibited by Gerrit: not permitted: update)原因&#xff1a; 使用Gerrit代码审核时&#xff0c;本…

CentOS 7基础操作02_优化Linux操作系统中的服务

1、实验环境 公司在文件服务器中新安装了CentOS系统.由于默认启动的服务程序较多&#xff0c;系统运行缓慢。现需要对系绞服务进行适当优化&#xff0c;减少一些不必要的自启动服务.并设置系统在开机后直接进入字符模式。 2、需求描述 根据实际使用需求对CentOS 7操作系统中的…

postgressql——PGPROC XLOG(6)

PGPROC相关结构 在共享内存中,核心数据结构围绕PROC_HDR指向的两个list:PROC和XACT PRCO内存连续,维护链表结构方便申请释放,对应每个后台服务进程,PID为OS标识、PGPROCNO为内部标识 XACT内存连续,维护快照需要的xmin和xid,XACT从PROC拆出来是为了更高的cache line命中…

IBM开源Granite Code模型,多尺寸可选,支持多种代码任务,性能媲美 CodeLlama

前言 近年来&#xff0c;大型语言模型&#xff08;LLM&#xff09;在代码领域展现出惊人的潜力&#xff0c;为软件开发流程带来了革命性的改变。代码 LLM 不仅能够生成高质量代码&#xff0c;还能帮助程序员修复错误、解释代码、编写文档等等&#xff0c;极大地提高了软件开发…

【kubernetes】探索k8s集群的存储卷、pvc和pv

目录 一、emptyDir存储卷 1.1 特点 1.2 用途 1.3部署 二、hostPath存储卷 2.1部署 2.1.1在 node01 节点上创建挂载目录 2.1.2在 node02 节点上创建挂载目录 2.1.3创建 Pod 资源 2.1.4访问测试 2.2 特点 2.3 用途 三、nfs共享存储卷 3.1特点 3.2用途 3.3部署 …

Web程序设计-实验05 DOM与BOM编程

题目 【实验主题】 影视网站后台影视记录管理页设计 【实验任务】 1、浏览并分析多个网站后台的列表页面、编辑页面&#xff08;详见参考资源&#xff0c;建议自行搜索更多后台页面&#xff09;的主要元素构成和版面设计&#xff0c;借鉴并构思预期效果。 2、新建 index.h…

正则匹配优化:匹配排除多个字符串的其他字符串

(^entity|^with|...)\w优化 (?!entity|with|has|index|associations|input)\w(?!): 匹配排除项 效果 继续优化 匹配会过滤掉带有关键字的字段&#xff0c;在过滤的时候是可以加上尾部结束匹配符的 效果&#xff1a;

thinkphp6 自定义的查询构造器类

前景需求&#xff1a;在查询的 时候我们经常会有一些通用的&#xff0c;查询条件&#xff0c;但是又不想每次都填写一遍条件&#xff0c;这个时候就需要重写查询类&#xff08;Query&#xff09; 我目前使用的thinkphp版本是6.1 首先自定义CustomQuery类继承于Query <?p…