Justin86713-优快云博客

原创 react native中用插值实现自定义动画效果

设想在RN如何实现一段抽奖转盘的动画：20%前慢，20-80%快，80-90%减慢，90-100%摇摆一下回正。难道用顺序动画去写？这里介绍的插值更方便，也许你没注意到它的强大。官方代码：value.interpolate({ inputRange: [-300, -100, 0, 100, 101], outputRange: [300, 0, 1, 0, 0]});注意input与output的对应方式。我们可以创建一个线性动画0-1，作为inputRange，然后输出"0deg"到

2020-09-22 20:52:59 651

原创关于react-native项目运行时下载依赖慢或无法运行的问题

如果你没有翻墙，第一次运行时多半时卡住了。首先是一个.zip的下载包例如gradle-6.2-all.zip，这个包有点大，复制链接在迅雷下载。下载好后放在C:\Users\Justin.gradle\wrapper\dists\gradle-6.2-all(xxxxxx)\，下关闭运行再启动时会继续下载其它依赖，也许还是慢的无法运行，注意官方的这个解决办法："也可以尝试阿里云提供的maven 镜像，将android/build.gradle中的jcenter()和google()分别替换为mave

2020-09-16 17:41:28 3013

原创用react实现首页轮播图功能

效果：如果是播放到末图时再返回到首图，这个其实挺简单，但这种末首切换效果让人感觉别扭。应该是播放到末图，然后同样方式切换到首图，然后继续，一直向后滑动播放的效果。这个同方向切换有些实现方式，比如单条新闻向上翻动的新闻或广告条，这个场景必须一个方向翻，所实现的方式是，新闻翻到最后一条时，把首条信息push到最后，再把第一条去掉，那么怎么看起来时无缝切换呢，那就是去掉动画和启用动画class的操作。修改数据时关闭，停顿启动时开启。这个做做除了鼠标经过停止没有其它交互的滚动条还可以，但用到轮播图，必须有指定

2020-08-31 23:25:14 1135

原创关于react返回页面时不加载react-redux中异步数据的问题

如题，这时在返回页面再刷新是没问题的。举个例子：componentWillMount() 中调用了 this.props.getPageContents() 基于redux的dispatch方法，而且它是异步的。这时在render()里通过this.props.contents获取它得到的值，开始是没问题的，但在新页面返回到这个页面是渲染为空或出错，刷新一下又正常了。遇到这个问题，这里采取了另一种方法在render()里获得数据。async componentDidMount() {await this

2020-08-31 21:44:05 706

原创解决react异步数据不更新页面或提示错误的问题

如果页面开始显示依赖的异步数据，而不是用户操作触发的，没有渲染异步内容时，看到部分人采用setTimeout延时渲染的方法，这是不准确而且是错误的。这里给出的一个方法，是添加所依赖的数据下渲染的判断条件。在没有拿到该异步数据前渲染为空，之后根据这个数据判断为真时渲染出有内容的页面。举一个例子，contents，这个值是根据redux插件连接state和dispatch，通过在componentWillMount() 钩子中调用this.props.getPageContents()得到的值，这个方法是异步

2020-08-31 21:18:39 2119

原创用react实现分页插件

到了vue和react时代之后分页问题简化很多，注意这里重点讨论语法，一些细节问题可以自己调试。要实现的效果：1.可传递总页数和显示页数，总页数超过显示页数中间要有省略号。2.切换到省略显示页码时，左右页码要随着变化显示，你可以设置当前页码左右显示的页数，改下判断逻辑就行，自己调。3.当然要有上一页下一页和跳页。...

2020-08-31 20:38:45 665

原创用微信小程序编写金额摇奖效果

教你如何用小程序编写摇奖数字特效由于没有小程序没有现成插件可用的情况比较多，比如新人红包，弹出红包后的弹跳和后追加的光圈效果，只有用到你的css3的动画编写能力了，对于不怎么写动画的前端可能有点费事。这个还好，那么遇到比如数字摇奖功能，关键可能就落在如果体现丝滑的效果上了。其实丝滑考的是动画调教，首先基本思路明确。拿到这个项目，看到视频演示效果，感觉比较“高端”，首先翻插件有没有现成的可套。但却是找不到。那就只有自己造了。好吧，数字翻动特效，从0-9，每个数字都要写。以这条思路作为驱动实现以下的程序：

2020-08-31 18:38:48 1083

原创用微信小程序编写抽奖大转盘

首先我们要先绘制出转盘布局，比如8项奖品转盘。基本布局思路：1. 8个产品块采用相对或绝对定位，先将8个产品固定在转盘中心位置。2. 每个产品块包括图片和文字，做好角度偏移，例如360°/8，第一个产品偏移角度。3. 计算x ,y 轴偏移量，这里使用translate()方法，你也可以用margin。由于每个角度直线位移一致，水平角度平移长度设为z，那么其它角度上的横向纵向偏移，分别用z*sin(...)和z*cos(...)三角函数求值。接着如何与后台数据交互问题：拿到获奖产品id，.

2020-08-31 17:22:49 3794

Justin86713的博客