9宫格控件 native react

2019-06-18 14:20:18 stone805 阅读数 68

本文将介绍从零开始实现一个 React Native 版本的九宫格抽奖转盘,先看最终效果图

也可以直接使用react-native-super-lottery组件开发抽奖功能。

一、布局

布局很简单,我们可以采用flex 3行布局,也可以单行、配合flex-wrap子控件自动折行实现。直接上代码

const LotteryStyle = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
  }
});

const img_width = 100; // 图片的宽度
const img_height = 80; // 图片的高度

// 观察上图的转盘,会发现存在三种类型的宫格
// 当前被高亮的宫格(增加了蒙层效果) , 正常的功能,以及正中心可以被点击的宫格
// 在真实的情况里,就需要根据 item、 index、 highLightIndex 等参数处理不同的宫格效果
// 具体可以参考本文最后开源的抽奖组件
function renderItem(item, index, highLightIndex) {
    const { url } = item;
    return <Image style={{ width, height }} source={{ uri: url }}/>;
}

<View style={LotteryStyle.container}>
    {
        data.map((item, index) => {
            return renderItem(item);
        })
    }
</View>  

动画

接下来重点介绍如何实现转盘动画效果,仔细观察会发现整个转盘动画可以分为三个阶段:

  1. 抽奖开始:转盘加速旋转阶段
  2. 等待抽奖结果:匀速旋转阶段(可能有、可能无,根据后端抽奖接口响应速度决定)
  3. 转盘降速阶段,逐步停到中奖宫格

九宫格的加速和衰减曲线决定了转盘动画的流畅程度。

实现原理:

转盘的转动,可以采用 setTimeout 快速修改下一个应该高亮的宫格,从而达到转动的视觉效果

旋转的速度其实就是 setTimeout 的interval间隔,interval越大速度越慢

因此转盘动画的流畅程度实际取决于 setTimeout interval 值变化的连续性

方案一:手动模拟三个阶段

手动模拟三个阶段大体思路如下:

  1. 前 CYCLE_TIMES = 30 次, 每次interval time 递减10ms,转盘逐渐加速
  2. 30次后如果没有返回了抽奖结果,则执行匀速旋转等待后端返回,如果返回了结果执行第三条
  3. 之后 8 次每次interval time 递增20ms,转盘逐渐降速
  4. 中奖前一次速度减80ms

下面的伪代码:

function startLottery() {
    this.setState({
        highLightIndex: currentIndex
    }, () => {
            this.currentIndex += 1;
            if (this.currentIndex > CYCLE_TIMES + 8 + this.uniformTimes && this.luckyOrder === currentOrder) {
                clearTimeout(this.lotteryTimer);
                // 完成抽奖,展示奖品弹窗等
            } else {
                if (this.currentIndex < CYCLE_TIMES) {
                    //  CYCLE_TIMES = 30 次, 每次速度递加 10ms,
                    this.speed -= 10;
                } else if (this.currentIndex > CYCLE_TIMES + 8 + this.uniformTimes && this.luckyOrder === currentOrder + 1) {
                    // 中奖前一次降速 80 急停效果
                    this.speed += 80;
                } else if(this.luckyOrder) {
                    // 后端为返回结果是匀速旋转
                    this.uniformTimes += 1;
                else {
                    this.speed += 20;
                }
                // 确保速度不能低于 50 ms
                if (this.speed < 50) {
                    this.speed = 50;
                }
                this.lotteryTimer = setTimeout(this.startLottery, this.speed);
            }
        }
    );
}

方案二:Tween.js 动画库

Tween.js是一个JavaScript的动画补间库,允许你以平滑的方式更改对象的属性或者某一个特殊的值。你只需告诉它什么属性要更改,当补间结束运行时它们应该具有哪些最终值,需要进过多长时间或者多少次数,补间引擎将负责计算从起始点到结束点任意时间点应该返回的值。

听起来正是我们想要的效果,我们可以如下定义加速、匀速、减速三个动画效果:

function animate(): void{
    TWEEN.update();
}

// 转盘加速阶段 : interval 经过20次 从初始值 100(启动速度) 降低到 40 (转盘最高速度) 
// interval 变化曲线为 TWEEN.Easing.Quadratic.In 
// 关于 Tween.js 各种曲线数值变化可以参考这里 https://sole.github.io/tween.js/examples/03_graphs.html
const speedUpTween = new TWEEN.Tween({ interval: 100 })
    .to({ interval: 40 }, 20)
    .easing(TWEEN.Easing.Quadratic.In)
    .onUpdate((object) => {
        // onUpdate 每次数值变化的回调, 可以拿到本次 interval 的值, 然后 setTimeout 开始动画
        setTimeout(() => {
            setHighLightIndex(highIndex + 1);
            animate();
        }, object.interval);
        currentSpeed = object.interval;
    })
    // 加速阶段完毕进入匀速阶段
    .onComplete(() => {
        speedUniformAnimate();
    })
    .start();

// 匀速运动
function speedUniformAnimate(): void{
    setTimeout(() => {
        // 如果没有拿到抽奖结果 转盘继续匀速转动
        if (lotteryResult) {
            setHighLightIndex(highIndex + 1);
            speedUniformAnimate();
        } else {
            // 匀速阶段完毕 开始降速
            speedDownTween.start();
        }
    }, currentSpeed);
}

// 降速阶段 从当前速度 currentSpeed 实际是 40 经过 8次衰减 降为 500,
// interval 变化曲线为 TWEEN.Easing.Quadratic.Out
const speedDownTween = new TWEEN.Tween({ interval: currentSpeed })
    .to({ interval: 500 }, 8)
    .easing(TWEEN.Easing.Quadratic.Out)
    .onUpdate((object) => {
        setTimeout(() => {
            setHighLightIndex(highIndex + 1);
            animate();
        }, object.interval);
    });

上述Demo有两个问题:

因为 Tween动画 必须要指定目标值,但在降速阶段有可能经过8次减速 最终停止的位置并不是我们中奖宫格的位置。当然这个问题我们可以反向通过控制降速阶段的开始时间:在匀速运动阶段,只有拿到抽奖结果并且距离中奖位置还有8格的时候才开始降速

第二个问题是 如果转盘需要支持多次抽奖 speedUpTween、 speedDownTween 等预定义动画需要重新初始化,官方文档里并没有找到类似reset的方法,暂时只能重新生成一遍。

开源的组件react-native-supper-lottery目前采用的是方案一。这里提供一个方案二模拟三阶段的Demo感兴趣的小伙伴可以仿照实现一版基于Tween.js的动画。

完成了布局和动画等核心功能,之后的封装组件提供start、stop等抽奖函数就很简单了,这里不再详述,详细代码可以参考组件react-native-supper-lottery,也可以直接使用。

2019-06-23 15:32:51 sinat_17775997 阅读数 94

本文将介绍从零开始实现一个 React Native 版本的九宫格抽奖转盘,先看最终效果图

也可以直接使用 react-native-super-lottery 组件开发抽奖功能。

一、布局

布局很简单,我们可以采用flex 3行布局,也可以单行、配合flex-wrap子控件自动折行实现。直接上代码

const LotteryStyle = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
  }
});

const img_width = 100; // 图片的宽度
const img_height = 80; // 图片的高度

// 观察上图的转盘,会发现存在三种类型的宫格
// 当前被高亮的宫格(增加了蒙层效果) , 正常的功能,以及正中心可以被点击的宫格
// 在真实的情况里,就需要根据 item、 index、 highLightIndex 等参数处理不同的宫格效果
// 具体可以参考本文最后开源的抽奖组件
function renderItem(item, index, highLightIndex) {
    const { url } = item;
    return <Image style={{ width, height }} source={{ uri: url }}/>;
}

<View style={LotteryStyle.container}>
    {
        data.map((item, index) => {
            return renderItem(item);
        })
    }
</View>

动画

接下来重点介绍如何实现转盘动画效果,仔细观察会发现整个转盘动画可以分为三个阶段:

  1. 抽奖开始:转盘加速旋转阶段
  2. 等待抽奖结果:匀速旋转阶段(可能有、可能无,根据后端抽奖接口响应速度决定)
  3. 转盘降速阶段,逐步停到中奖宫格

九宫格的加速和衰减曲线决定了转盘动画的流畅程度。

实现原理:

转盘的转动,可以采用 setTimeout 快速修改下一个应该高亮的宫格,从而达到转动的视觉效果

旋转的速度其实就是 setTimeout 的interval间隔,interval越大速度越慢

因此转盘动画的流畅程度实际取决于 setTimeout interval 值变化的连续性

方案一:手动模拟三个阶段

手动模拟三个阶段大体思路如下:

  1. 前 CYCLE_TIMES = 30 次, 每次interval time 递减10ms,转盘逐渐加速
  2. 30次后如果没有返回了抽奖结果,则执行匀速旋转等待后端返回,如果返回了结果执行第三条
  3. 之后 8 次每次interval time 递增20ms,转盘逐渐降速
  4. 中奖前一次速度减80ms

下面的伪代码:

function startLottery() {
    this.setState({
        highLightIndex: currentIndex
    }, () => {
            this.currentIndex += 1;
            if (this.currentIndex > CYCLE_TIMES + 8 + this.uniformTimes && this.luckyOrder === currentOrder) {
                clearTimeout(this.lotteryTimer);
                // 完成抽奖,展示奖品弹窗等
            } else {
                if (this.currentIndex < CYCLE_TIMES) {
                    //  CYCLE_TIMES = 30 次, 每次速度递加 10ms,
                    this.speed -= 10;
                } else if (this.currentIndex > CYCLE_TIMES + 8 + this.uniformTimes && this.luckyOrder === currentOrder + 1) {
                    // 中奖前一次降速 80 急停效果
                    this.speed += 80;
                } else if(this.luckyOrder) {
                    // 后端为返回结果是匀速旋转
                    this.uniformTimes += 1;
                else {
                    this.speed += 20;
                }
                // 确保速度不能低于 50 ms
                if (this.speed < 50) {
                    this.speed = 50;
                }
                this.lotteryTimer = setTimeout(this.startLottery, this.speed);
            }
        }
    );
}

方案二:Tween.js 动画库

Tween.js是一个JavaScript的动画补间库,允许你以平滑的方式更改对象的属性或者某一个特殊的值。你只需告诉它什么属性要更改,当补间结束运行时它们应该具有哪些最终值,需要进过多长时间或者多少次数,补间引擎将负责计算从起始点到结束点任意时间点应该返回的值。

听起来正是我们想要的效果,我们可以如下定义加速、匀速、减速三个动画效果:

function animate(): void{
    TWEEN.update();
}

// 转盘加速阶段 : interval 经过20次 从初始值 100(启动速度) 降低到 40 (转盘最高速度) 
// interval 变化曲线为 TWEEN.Easing.Quadratic.In 
// 关于 Tween.js 各种曲线数值变化可以参考这里 https://sole.github.io/tween.js/examples/03_graphs.html
const speedUpTween = new TWEEN.Tween({ interval: 100 })
    .to({ interval: 40 }, 20)
    .easing(TWEEN.Easing.Quadratic.In)
    .onUpdate((object) => {
        // onUpdate 每次数值变化的回调, 可以拿到本次 interval 的值, 然后 setTimeout 开始动画
        setTimeout(() => {
            setHighLightIndex(highIndex + 1);
            animate();
        }, object.interval);
        currentSpeed = object.interval;
    })
    // 加速阶段完毕进入匀速阶段
    .onComplete(() => {
        speedUniformAnimate();
    })
    .start();

// 匀速运动
function speedUniformAnimate(): void{
    setTimeout(() => {
        // 如果没有拿到抽奖结果 转盘继续匀速转动
        if (lotteryResult) {
            setHighLightIndex(highIndex + 1);
            speedUniformAnimate();
        } else {
            // 匀速阶段完毕 开始降速
            speedDownTween.start();
        }
    }, currentSpeed);
}

// 降速阶段 从当前速度 currentSpeed 实际是 40 经过 8次衰减 降为 500,
// interval 变化曲线为 TWEEN.Easing.Quadratic.Out
const speedDownTween = new TWEEN.Tween({ interval: currentSpeed })
    .to({ interval: 500 }, 8)
    .easing(TWEEN.Easing.Quadratic.Out)
    .onUpdate((object) => {
        setTimeout(() => {
            setHighLightIndex(highIndex + 1);
            animate();
        }, object.interval);
    });

上述Demo有两个问题:

因为 Tween动画 必须要指定目标值,但在降速阶段有可能经过8次减速 最终停止的位置并不是我们中奖宫格的位置。当然这个问题我们可以反向通过控制降速阶段的开始时间: 在匀速运动阶段,只有拿到抽奖结果并且距离中奖位置还有8格的时候才开始降速

第二个问题是 如果转盘需要支持多次抽奖 speedUpTween、 speedDownTween 等预定义动画需要重新初始化,官方文档里并没有找到类似reset的方法,暂时只能重新生成一遍。

开源的组件 react-native-supper-lottery 目前采用的是方案一。这里提供一个方案二模拟三阶段的 Demo 感兴趣的小伙伴可以仿照实现一版基于Tween.js的动画。

完成了布局和动画等核心功能,之后的封装组件提供start、stop等抽奖函数就很简单了,这里不再详述,详细代码可以参考组件 react-native-supper-lottery ,也可以直接使用。

原文https://www.tuicool.com/articles/VjQzMj3

2019-05-27 09:31:02 weixin_34178244 阅读数 104

本文将介绍从零开始实现一个 React Native 版本的九宫格抽奖转盘,先看最终效果图

也可以直接使用react-native-super-lottery组件开发抽奖功能。

一、布局

布局很简单,我们可以采用flex 3行布局,也可以单行、配合flex-wrap子控件自动折行实现。直接上代码

const LotteryStyle = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
  }
});

const img_width = 100; // 图片的宽度
const img_height = 80; // 图片的高度

// 观察上图的转盘,会发现存在三种类型的宫格
// 当前被高亮的宫格(增加了蒙层效果) , 正常的功能,以及正中心可以被点击的宫格
// 在真实的情况里,就需要根据 item、 index、 highLightIndex 等参数处理不同的宫格效果
// 具体可以参考本文最后开源的抽奖组件
function renderItem(item, index, highLightIndex) {
    const { url } = item;
    return <Image style={{ width, height }} source={{ uri: url }}/>;
}

<View style={LotteryStyle.container}>
    {
        data.map((item, index) => {
            return renderItem(item);
        })
    }
</View>  
复制代码

二、动画

接下来重点介绍如何实现转盘动画效果,仔细观察会发现整个转盘动画可以分为三个阶段:

  1. 抽奖开始:转盘加速旋转阶段
  2. 等待抽奖结果:匀速旋转阶段(可能有、可能无,根据后端抽奖接口响应速度决定)
  3. 转盘降速阶段,逐步停到中奖宫格

九宫格的加速和衰减曲线决定了转盘动画的流畅程度。

实现原理:

转盘的转动,可以采用 setTimeout 快速修改下一个应该高亮的宫格,从而达到转动的视觉效果

旋转的速度其实就是 setTimeout 的interval间隔,interval越大速度越慢

因此转盘动画的流畅程度实际取决于 setTimeout interval 值变化的连续性

方案一:手动模拟三个阶段

手动模拟三个阶段大体思路如下:

  1. 前 CYCLE_TIMES = 30 次, 每次interval time 递减10ms,转盘逐渐加速
  2. 30次后如果没有返回了抽奖结果,则执行匀速旋转等待后端返回,如果返回了结果执行第三条
  3. 之后 8 次每次interval time 递增20ms,转盘逐渐降速
  4. 中奖前一次速度减80ms

下面的伪代码:

function startLottery() {
    this.setState({
        highLightIndex: currentIndex
    }, () => {
            this.currentIndex += 1;
            if (this.currentIndex > CYCLE_TIMES + 8 + this.uniformTimes && this.luckyOrder === currentOrder) {
                clearTimeout(this.lotteryTimer);
                // 完成抽奖,展示奖品弹窗等
            } else {
                if (this.currentIndex < CYCLE_TIMES) {
                    //  CYCLE_TIMES = 30 次, 每次速度递加 10ms,
                    this.speed -= 10;
                } else if (this.currentIndex > CYCLE_TIMES + 8 + this.uniformTimes && this.luckyOrder === currentOrder + 1) {
                    // 中奖前一次降速 80 急停效果
                    this.speed += 80;
                } else if(this.luckyOrder) {
                    // 后端为返回结果是匀速旋转
                    this.uniformTimes += 1;
                else {
                    this.speed += 20;
                }
                // 确保速度不能低于 50 ms
                if (this.speed < 50) {
                    this.speed = 50;
                }
                this.lotteryTimer = setTimeout(this.startLottery, this.speed);
            }
        }
    );
}
复制代码

方案二:Tween.js 动画库

Tween.js是一个JavaScript的动画补间库,允许你以平滑的方式更改对象的属性或者某一个特殊的值。你只需告诉它什么属性要更改,当补间结束运行时它们应该具有哪些最终值,需要进过多长时间或者多少次数,补间引擎将负责计算从起始点到结束点任意时间点应该返回的值。

听起来正是我们想要的效果,我们可以如下定义加速、匀速、减速三个动画效果:

function animate(): void{
    TWEEN.update();
}

// 转盘加速阶段 : interval 经过20次 从初始值 100(启动速度) 降低到 40 (转盘最高速度) 
// interval 变化曲线为 TWEEN.Easing.Quadratic.In 
// 关于 Tween.js 各种曲线数值变化可以参考这里 https://sole.github.io/tween.js/examples/03_graphs.html
const speedUpTween = new TWEEN.Tween({ interval: 100 })
    .to({ interval: 40 }, 20)
    .easing(TWEEN.Easing.Quadratic.In)
    .onUpdate((object) => {
        // onUpdate 每次数值变化的回调, 可以拿到本次 interval 的值, 然后 setTimeout 开始动画
        setTimeout(() => {
            setHighLightIndex(highIndex + 1);
            animate();
        }, object.interval);
        currentSpeed = object.interval;
    })
    // 加速阶段完毕进入匀速阶段
    .onComplete(() => {
        speedUniformAnimate();
    })
    .start();

// 匀速运动
function speedUniformAnimate(): void{
    setTimeout(() => {
        // 如果没有拿到抽奖结果 转盘继续匀速转动
        if (lotteryResult) {
            setHighLightIndex(highIndex + 1);
            speedUniformAnimate();
        } else {
            // 匀速阶段完毕 开始降速
            speedDownTween.start();
        }
    }, currentSpeed);
}

// 降速阶段 从当前速度 currentSpeed 实际是 40 经过 8次衰减 降为 500,
// interval 变化曲线为 TWEEN.Easing.Quadratic.Out
const speedDownTween = new TWEEN.Tween({ interval: currentSpeed })
    .to({ interval: 500 }, 8)
    .easing(TWEEN.Easing.Quadratic.Out)
    .onUpdate((object) => {
        setTimeout(() => {
            setHighLightIndex(highIndex + 1);
            animate();
        }, object.interval);
    });
复制代码

上述Demo有两个问题:

因为 Tween动画 必须要指定目标值,但在降速阶段有可能经过8次减速 最终停止的位置并不是我们中奖宫格的位置。当然这个问题我们可以反向通过控制降速阶段的开始时间:在匀速运动阶段,只有拿到抽奖结果并且距离中奖位置还有8格的时候才开始降速

第二个问题是 如果转盘需要支持多次抽奖 speedUpTween、 speedDownTween 等预定义动画需要重新初始化,官方文档里并没有找到类似reset的方法,暂时只能重新生成一遍。

开源的组件react-native-supper-lottery目前采用的是方案一。这里提供一个方案二模拟三阶段的Demo感兴趣的小伙伴可以仿照实现一版基于Tween.js的动画。

完成了布局和动画等核心功能,之后的封装组件提供start、stop等抽奖函数就很简单了,这里不再详述,详细代码可以参考组件react-native-supper-lottery,也可以直接使用。

转载于:https://juejin.im/post/5cebae1af265da1b5e72d19c

2019-05-29 15:24:47 weixin_34032621 阅读数 75

从零开始完成React Native 九宫格抽奖

本文将介绍从零开始实现一个 React Native 版本的九宫格抽奖转盘,先看最终效果图

也可以直接使用react-native-super-lottery组件开发抽奖功能。

一、布局

布局很简单,我们可以采用flex 3行布局,也可以单行、配合flex-wrap子控件自动折行实现。直接上代码

const LotteryStyle = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
  }
});

const img_width = 100; // 图片的宽度
const img_height = 80; // 图片的高度

// 观察上图的转盘,会发现存在三种类型的宫格
// 当前被高亮的宫格(增加了蒙层效果) , 正常的功能,以及正中心可以被点击的宫格
// 在真实的情况里,就需要根据 item、 index、 highLightIndex 等参数处理不同的宫格效果
// 具体可以参考本文最后开源的抽奖组件
function renderItem(item, index, highLightIndex) {
    const { url } = item;
    return <Image style={{ width, height }} source={{ uri: url }}/>;
}

<View style={LotteryStyle.container}>
    {
        data.map((item, index) => {
            return renderItem(item);
        })
    }
</View>  
复制代码

动画

接下来重点介绍如何实现转盘动画效果,仔细观察会发现整个转盘动画可以分为三个阶段:

  1. 抽奖开始:转盘加速旋转阶段
  2. 等待抽奖结果:匀速旋转阶段(可能有、可能无,根据后端抽奖接口响应速度决定)
  3. 转盘降速阶段,逐步停到中奖宫格

九宫格的加速和衰减曲线决定了转盘动画的流畅程度。

实现原理:

转盘的转动,可以采用 setTimeout 快速修改下一个应该高亮的宫格,从而达到转动的视觉效果

旋转的速度其实就是 setTimeout 的interval间隔,interval越大速度越慢

因此转盘动画的流畅程度实际取决于 setTimeout interval 值变化的连续性

方案一:手动模拟三个阶段

手动模拟三个阶段大体思路如下:

  1. 前 CYCLE_TIMES = 30 次, 每次interval time 递减10ms,转盘逐渐加速
  2. 30次后如果没有返回了抽奖结果,则执行匀速旋转等待后端返回,如果返回了结果执行第三条
  3. 之后 8 次每次interval time 递增20ms,转盘逐渐降速
  4. 中奖前一次速度减80ms

下面的伪代码:

function startLottery() {
    this.setState({
        highLightIndex: currentIndex
    }, () => {
            this.currentIndex += 1;
            if (this.currentIndex > CYCLE_TIMES + 8 + this.uniformTimes && this.luckyOrder === currentOrder) {
                clearTimeout(this.lotteryTimer);
                // 完成抽奖,展示奖品弹窗等
            } else {
                if (this.currentIndex < CYCLE_TIMES) {
                    //  CYCLE_TIMES = 30 次, 每次速度递加 10ms,
                    this.speed -= 10;
                } else if (this.currentIndex > CYCLE_TIMES + 8 + this.uniformTimes && this.luckyOrder === currentOrder + 1) {
                    // 中奖前一次降速 80 急停效果
                    this.speed += 80;
                } else if(this.luckyOrder) {
                    // 后端为返回结果是匀速旋转
                    this.uniformTimes += 1;
                else {
                    this.speed += 20;
                }
                // 确保速度不能低于 50 ms
                if (this.speed < 50) {
                    this.speed = 50;
                }
                this.lotteryTimer = setTimeout(this.startLottery, this.speed);
            }
        }
    );
}
复制代码

方案二:Tween.js 动画库

Tween.js是一个JavaScript的动画补间库,允许你以平滑的方式更改对象的属性或者某一个特殊的值。你只需告诉它什么属性要更改,当补间结束运行时它们应该具有哪些最终值,需要进过多长时间或者多少次数,补间引擎将负责计算从起始点到结束点任意时间点应该返回的值。

听起来正是我们想要的效果,我们可以如下定义加速、匀速、减速三个动画效果:

function animate(): void{
    TWEEN.update();
}

// 转盘加速阶段 : interval 经过20次 从初始值 100(启动速度) 降低到 40 (转盘最高速度) 
// interval 变化曲线为 TWEEN.Easing.Quadratic.In 
// 关于 Tween.js 各种曲线数值变化可以参考这里 https://sole.github.io/tween.js/examples/03_graphs.html
const speedUpTween = new TWEEN.Tween({ interval: 100 })
    .to({ interval: 40 }, 20)
    .easing(TWEEN.Easing.Quadratic.In)
    .onUpdate((object) => {
        // onUpdate 每次数值变化的回调, 可以拿到本次 interval 的值, 然后 setTimeout 开始动画
        setTimeout(() => {
            setHighLightIndex(highIndex + 1);
            animate();
        }, object.interval);
        currentSpeed = object.interval;
    })
    // 加速阶段完毕进入匀速阶段
    .onComplete(() => {
        speedUniformAnimate();
    })
    .start();

// 匀速运动
function speedUniformAnimate(): void{
    setTimeout(() => {
        // 如果没有拿到抽奖结果 转盘继续匀速转动
        if (lotteryResult) {
            setHighLightIndex(highIndex + 1);
            speedUniformAnimate();
        } else {
            // 匀速阶段完毕 开始降速
            speedDownTween.start();
        }
    }, currentSpeed);
}

// 降速阶段 从当前速度 currentSpeed 实际是 40 经过 8次衰减 降为 500,
// interval 变化曲线为 TWEEN.Easing.Quadratic.Out
const speedDownTween = new TWEEN.Tween({ interval: currentSpeed })
    .to({ interval: 500 }, 8)
    .easing(TWEEN.Easing.Quadratic.Out)
    .onUpdate((object) => {
        setTimeout(() => {
            setHighLightIndex(highIndex + 1);
            animate();
        }, object.interval);
    });
复制代码

上述Demo有两个问题:

因为 Tween动画 必须要指定目标值,但在降速阶段有可能经过8次减速 最终停止的位置并不是我们中奖宫格的位置。当然这个问题我们可以反向通过控制降速阶段的开始时间:在匀速运动阶段,只有拿到抽奖结果并且距离中奖位置还有8格的时候才开始降速

第二个问题是 如果转盘需要支持多次抽奖 speedUpTween、 speedDownTween 等预定义动画需要重新初始化,官方文档里并没有找到类似reset的方法,暂时只能重新生成一遍。

开源的组件react-native-supper-lottery目前采用的是方案一。这里提供一个方案二模拟三阶段的Demo感兴趣的小伙伴可以仿照实现一版基于Tween.js的动画。

完成了布局和动画等核心功能,之后的封装组件提供start、stop等抽奖函数就很简单了,这里不再详述,详细代码可以参考组件react-native-supper-lottery,也可以直接使用。

转载于:https://juejin.im/post/5ceea417e51d454fbe24a625

2018-05-04 14:58:31 shyzh_li 阅读数 578

SectionList是React Native在0.43版本推出的高性能分组列表组件,主要的功能有:支持水平布局,支持单独的头、尾部组件,自定义行间分割线,上拉、下拉刷新。

这篇文章主要描述通过封装数据源来实现宫格样式的布局,

1、初始化SectionList组件,数据源的封装稍后讲解

<SectionList style={{marginTop:64, backgroundColor:'#f2f2f2'}}
             renderItem={this.renderItem.bind(this)}  //渲染行
             renderSectionHeader={this.renderSectionHeader}  //行间分隔组件渲染
             keyExtractor={(item,index)=>("index"+index+item)}
             sections={this.state.responseData}  //数据源
             ListHeaderComponent={this.renderHeader.bind(this)}  //自定义头部组件渲染
             ListFooterComponent={this.renderFooter.bind(this)}   //自定义尾部组件渲染
             stickySectionHeadersEnabled={true}>
</SectionList>

2、各个子组件的渲染

(1)头部组件渲染

renderHeader() {
    return (
        <View style={{flex: 1}}>
            <Text>这是sectionlist的header</Text>
        </View>
    );
}

(2)尾部组件渲染

renderFooter() {
    return (
        <View style={{flex: 1}}>
            <Text>这是sectionlist的footer</Text>
        </View>
    );
}

(3)行间隔组件渲染

renderSectionHeader(section) {
    return (
        <View style={{backgroundColor:'#f2f2f2', height:20, width:width}}/>
    );
}

(4)数据源的封装

    SectionList对数据源的格式有要求,要求数据源的为{key: 'key', data: ['item1', 'item2', 'item3', 'item4']}这种格式的数据。

    所以说,如果我们要实现SectionList样式是正常的行类型,只需将数据封装成上述格式即可,但是,如果我们需要宫格类型的样式,就需要对数据源进一步的封装。上述格式中data字段的类型是一个数组,其中的数据就是SectionList的每一行要显示的数据源,我们这部分的数据源重新封装到一个数组中,再赋值给data,最后我们的数据源变成这样的格式:{key: 'key', data: [['item1', 'item2', 'item3', 'item4']]},  {key: 'key2', data: [['item5', 'item6', 'item7', 'item8']]}。

 (5)行组件的封装

    通过对上述数据源的封装,data字段的数组中有一个数组元素,那么就相当于SectionList会展示两行数据,每一行的数据源是一个数组,那么在rendeItem时通过对当前数据源的遍历,即遍历到Item1、Item2...,为每一个item渲染一个View,这样就实现了宫格样式。

renderItem(info) {
    return (
        <View style={{flexDirection:'row', alignItems:'flex-start', backgroundColor: 'white', flexWrap: 'wrap'}}>
            {
                info.item.map((item, i) => { //遍历数组中的每个item对象
                    return (
                        <TouchableOpacity key={i} onPress={this.itemClicked.bind(this, item)}>
                            <View style={{height:width/5, width:width/5}}>
                                <Image style={{width:22, height:22, marginTop:10, marginLeft:(width/5 - 22)/2}}
                                       source={{item.imageUrl}}></Image>     //显示图片,根据自己数据源中的对应的字段来
                                <Text style={{marginTop:10, alignSelf:'flex-start',
                                    width:width/5, textAlign:'center'}}>{item.title}</Text>  //显示文本
                            </View>
                        </TouchableOpacity>
                    );
                })
            }
        </View>
    );
}
个人理解,欢迎指正

web学习笔记

阅读数 525