这个交互也太炸裂了趴

最新推荐文章于 2022-08-11 11:01:06 发布
最新推荐文章于 2022-08-11 11:01:06 发布
阅读量343 收藏 1
点赞数
分类专栏： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/villa_mou/article/details/106565336
版权

动画是为一个app创造出色用户体验的重要组成部分。 它的关键挑战是向用户解释应用程序的逻辑，但是常见的错误是鲁莽地使用动画，从而否定了改善用户体验的整个观点。 为了使应用出色而不仅仅是出色或平庸，动画必须正确集成并且不应多余。

在本文中，您将了解如何使用ScrollView和react-native的Animated API创建标题动画。在文章结尾之后，我们将获得以下输出

图1

How it works?

在ScrollView上渲染标头，并将ScrollView的顶部位置设置为标头的偏移量。然后，我们可以简单地使用ScrollView滚动位置插入标头。因此，让我们了解一下。

Let’s Code

我们使用Interpolate来更改位置，大小，颜色和Animated.event（），以将ScrollView位置与动画状态值进行映射。您可以阅读有关Interpolate（https://animationbook.codedaily.io/interpolation）和Animated.event（https://animationbook.codedaily.io/animated-event/）的更多详细信息。

始终在动画配置中设置useNativeDriver：true。通过跳过每个渲染帧的JS代码和本机代码之间的桥梁，可以使动画流畅。

  • 由于React-Native的限制，seNativeDriver当前不支持绝对位置。为此，我们使用了transform属性。对于顶部，我们使用translateY，对于左边，我们使用translateX。

使用来自构造函数的动画值初始化状态scrollY，如下所示：

constructor(props) {        
   super(props);       
   this.state = {            
       scrollY: new Animated.Value(0)        
    };    
}

现在我们不希望组件重新呈现，因此我们不使用setState（）方法。我们使用ScrollView的onScroll属性来映射带有滚动位置的状态：

<Animated.ScrollView
    overScrollMode={'never'}                    
    style={{zIndex: 10}}
    scrollEventThrottle={16}                    
    onScroll={Animated.event(
        [
          {
             nativeEvent: {contentOffset:{y:this.state.scrollY}}
          }
        ]
    )}>
      //child here
</Animated.ScrollView>

Animated.event（）方法使用ScrollView的Y偏移量映射状态scrollY表示垂直偏移量。

scrollEventThrottle 控制滚动时触发滚动事件的频率（以毫秒为单位的时间间隔）。 较小的数字可提高跟踪滚动位置的代码的准确性，但由于通过网桥发送的信息量大，因此可能导致滚动性能问题。 当JS运行循环同步到屏幕刷新率时，您不会注意到在1-16之间设置的值之间存在差异。

现在是时候对轮廓图像进行动画处理了，以借助Interpolation从屏幕中间到左侧标题进行动画处理。

//artist profile image position from left
_getImageLeftPosition = () => {
    const {scrollY} = this.state;

    return scrollY.interpolate({
        inputRange: [0, 80, 140],
        outputRange: [ThemeUtils.relativeWidth(30), ThemeUtils.relativeWidth(38), ThemeUtils.relativeWidth(10)],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};

可以先通过插值来运行每个属性。 插值通常使用线性插值将输入范围映射到输出范围，但还支持缓动功能。 默认情况下，它将外推曲线超出给定的范围，但是您也可以将其钳制输出值。

在这里，从输入范围0–80，我们的图像将相对于设备宽度的位置从30更改为38，从80–140则将相对位置更改为38至10。
当状态值从我们之前完成的ScrollView的onScroll映射更改时调用的插值方法。

//artist profile image position from top
_getImageTopPosition = () => {
    const {scrollY} = this.state;

    return scrollY.interpolate({
        inputRange: [0, 140],
        outputRange: [ThemeUtils.relativeHeight(20), Platform.OS === 'ios' ? 8 : 10],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};

 //artist profile image width
  _getImageWidth = () => {
      const {scrollY} = this.state;

      return scrollY.interpolate({
          inputRange: [0, 140],
          outputRange: [ThemeUtils.relativeWidth(40), ThemeUtils.APPBAR_HEIGHT - 20],
          extrapolate: 'clamp',
          useNativeDriver: true
      });
  };

  //artist profile image height
  _getImageHeight = () => {
      const {scrollY} = this.state;

      return scrollY.interpolate({
          inputRange: [0, 140],
          outputRange: [ThemeUtils.relativeWidth(40), ThemeUtils.APPBAR_HEIGHT - 20],
          extrapolate: 'clamp',
          useNativeDriver: true
      });
  };

与左位置相同，我们将位置设置为top，根据ScrollView的滚动位置设置图像的高度和宽度。现在，以Animated.Image的样式设置这些值，如下所示：

render() {
    const profileImageLeft = this._getImageLeftPosition();
    const profileImageTop = this._getImageTopPosition();
    const profileImageWidth = this._getImageWidth();
    const profileImageHeight = this._getImageHeight();

return(
      <Animated.Image
            style={
                [styles.profileImage, {
                borderRadius: (ThemeUtils.APPBAR_HEIGHT - 20) / 2,
                height: profileImageHeight,
                width: profileImageWidth,
                transform: [
                       {translateY: profileImageTop},
                       {translateX: profileImageLeft}
                    ]
                }]}
                source={profileImage}
      />
    );
}

现在，当用户滚动ScrollView时，将调用onScroll方法，我们的状态scrollY将更改，并且当stateY更改后，将调用内插法，并且完成了精美的动画。
在当前示例中，我使用了许多插值值，例如图像边框宽度，图像边框颜色，标题不透明度等。所有方法都在滚动位置映射的相同原理下工作。

最终代码：

import React, {Component, PureComponent} from 'react';
import {
    Animated,
    View,
    StatusBar,
    Text,
    Image,
    Platform,
    StyleSheet,
    Linking,
    TouchableOpacity,
} from 'react-native';

/*Data*/
import artistData from './assets/data/SongData.json';
import MaterialAnimatedView from './MaterialAnimatedView';
import {HTouchable} from '../../components/HTouchable';
import {Navigation, Options} from 'react-native-navigation';
import {MyColors} from '../../config/Colors';
import {ThemeUtils} from './utils/ThemeUtils';
const ARTIST_NAME = 'Villa_Mou';
const coverImage = require('./assets/images/bg.png');
const profileImage = require('./assets/images/icon.png');
const backImage = require('./assets/images/back.png');

interface Props {
    componentId: string;
}
interface State {
    scrollY: any;
}
/**
 * 图片高度 屏幕30%
 */
const HEADER_IMAGE_HEIGHT = ThemeUtils.relativeHeight(30);
export default class ArtistScreen extends PureComponent<Props, State> {
    static options(): Options {
        return {
            topBar: {
                visible: false,
            },
            statusBar: {drawBehind: true, style: 'light', backgroundColor: 'rgba(0,0,0,0.4)'},
        };
    }
    constructor(props) {
        super(props);
        this.state = {
            scrollY: new Animated.Value(0),
        };
    }

    render() {
        return (
            <View style={styles.container}>
                {this.renderHeaderImageBg()}
                {this.renderHeader()}
                {this.renderUserIcon()}
                {this.renderVipCard()}
                {this.renderList()}
            </View>
        );
    }

    private renderVipCard = () => {
        const top = this._getVipCardTop();
        const opacity = this._getVipCardOpacity();
        return (
            <Animated.View
                style={{
                    height: 50,
                    backgroundColor: MyColors.BLACK,
                    position: 'absolute',
                    top: top,
                    left: 25,
                    right: 25,
                    justifyContent: 'center',
                    paddingLeft: 15,
                    borderTopLeftRadius: 6,
                    borderTopRightRadius: 6,
                    opacity,
                }}>
                <Text style={{color: '#744307', fontWeight: 'bold', fontSize: 16}}>专属VIP卡</Text>
            </Animated.View>
        );
    };

    private renderList = () => {
        const listViewTop = this._getListViewTopPosition();
        const normalTitleOpacity = this._getNormalTitleOpacity();
        return (
            <Animated.ScrollView
                overScrollMode={'never'}
                style={{zIndex: 10}}
                scrollEventThrottle={16}
                onScroll={Animated.event([
                    {
                        nativeEvent: {contentOffset: {y: this.state.scrollY}},
                    },
                ])}>
                <Animated.Text
                    style={[
                        styles.profileTitle,
                        {
                            opacity: normalTitleOpacity,
                        },
                    ]}>
                    {ARTIST_NAME}
                </Animated.Text>

                <Animated.View
                    style={{
                        transform: [
                            {
                                translateY: listViewTop,
                            },
                        ],
                    }}>
                    {artistData.map((item, index) => this.renderItem(index, item))}
                </Animated.View>
            </Animated.ScrollView>
        );
    };

    private renderUserIcon = () => {
        const profileImageLeft = this._getImageLeftPosition();

        const profileImageTop = this._getImageTopPosition();

        const profileImageWidth = this._getImageWidth();

        const profileImageHeight = this._getImageHeight();

        const profileImageBorderWidth = this._getImageBorderWidth();

        const profileImageBorderColor = this._getImageBorderColor();
        return (
            <Animated.Image
                style={[
                    styles.profileImage,
                    {
                        borderWidth: profileImageBorderWidth,
                        borderColor: profileImageBorderColor,
                        borderRadius: (ThemeUtils.APPBAR_HEIGHT - 20) / 2,
                        height: profileImageHeight,
                        width: profileImageWidth,
                        transform: [{translateY: profileImageTop}, {translateX: profileImageLeft}],
                    },
                ]}
                source={profileImage}
            />
        );
    };

    private renderHeaderImageBg = () => {
        const headerImageOpacity = this._getHeaderImageOpacity();
        return (
            <Animated.Image
                style={[
                    styles.headerImageStyle,
                    {
                        opacity: headerImageOpacity,
                    },
                ]}
                source={coverImage}
            />
        );
    };

    private renderHeader = () => {
        const headerBackgroundColor = this._getHeaderBackgroundColor();
        const headerTitleOpacity = this._getHeaderTitleOpacity();
        return (
            <View>
                {Platform.OS === 'android' && (
                    <Animated.View
                        style={{
                            height: StatusBar.currentHeight,
                            backgroundColor: headerBackgroundColor,
                        }}
                    />
                )}
                <Animated.View
                    style={[
                        styles.headerStyle,
                        {
                            backgroundColor: headerBackgroundColor,
                        },
                    ]}>
                    <HTouchable
                        style={styles.headerLeftIcon}
                        onPress={() => {
                            Navigation.pop(this.props.componentId);
                        }}>
                        <Image source={backImage} />
                    </HTouchable>

                    <Animated.Text
                        style={[
                            styles.headerTitle,
                            {
                                opacity: headerTitleOpacity,
                            },
                        ]}>
                        {ARTIST_NAME}
                    </Animated.Text>
                </Animated.View>
            </View>
        );
    };

    renderItem = (index, item) => {
        return (
            <MaterialAnimatedView key={index.toString()} index={index}>
                <HTouchable style={styles.artistCardContainerStyle} onPress={() => {}}>
                    <Image source={{uri: item.artistImage}} style={styles.artistImage} />
                    <View style={styles.cardTextContainer}>
                        <Text numberOfLines={1} style={styles.songTitleStyle}>
                            {item.songName}
                        </Text>
                        <Text numberOfLines={1}>{item.albumName}</Text>
                    </View>
                </HTouchable>
            </MaterialAnimatedView>
        );
    };

    // scrollY从 0到 140 ，颜色从透明到黑色
    _getHeaderBackgroundColor = () => {
        const {scrollY} = this.state;

        return scrollY.interpolate({
            inputRange: [0, 140],
            outputRange: ['rgba(0,0,0,0.0)', MyColors.BLACK],
            extrapolate: 'clamp',
            useNativeDriver: true,
        });
    };

    //scrollY从 0到 140 ，透明度从1到0
    _getHeaderImageOpacity = () => {
        const {scrollY} = this.state;

        return scrollY.interpolate({
            inputRange: [0, 140],
            outputRange: [1, 0],
            extrapolate: 'clamp',
            useNativeDriver: true,
        });
    };

    //artist profile image position from left
    _getImageLeftPosition = () => {
        const {scrollY} = this.state;

        return scrollY.interpolate({
            inputRange: [0, 80, 140],
            outputRange: [
                ThemeUtils.relativeWidth(35),
                ThemeUtils.relativeWidth(38),
                ThemeUtils.relativeWidth(12),
            ],
            extrapolate: 'clamp',
            useNativeDriver: true,
        });
    };

    //artist profile image position from top
    _getImageTopPosition = () => {
        const {scrollY} = this.state;

        return scrollY.interpolate({
            inputRange: [0, 140],
            outputRange: [
                ThemeUtils.relativeHeight(20),
                Platform.OS === 'ios' ? 8 : 10 + StatusBar.currentHeight,
            ],
            extrapolate: 'clamp',
            useNativeDriver: true,
        });
    };

    //artist profile image width
    _getImageWidth = () => {
        const {scrollY} = this.state;

        return scrollY.interpolate({
            inputRange: [0, 140],
            outputRange: [ThemeUtils.relativeWidth(30), ThemeUtils.APPBAR_HEIGHT - 20],
            extrapolate: 'clamp',
            useNativeDriver: true,
        });
    };

    //artist profile image height
    _getImageHeight = () => {
        const {scrollY} = this.state;

        return scrollY.interpolate({
            inputRange: [0, 140],
            outputRange: [ThemeUtils.relativeWidth(30), ThemeUtils.APPBAR_HEIGHT - 20],
            extrapolate: 'clamp',
            useNativeDriver: true,
        });
    };

    //artist profile image border width
    _getImageBorderWidth = () => {
        const {scrollY} = this.state;

        return scrollY.interpolate({
            inputRange: [0, 140],
            outputRange: [StyleSheet.hairlineWidth * 3, StyleSheet.hairlineWidth],
            extrapolate: 'clamp',
            useNativeDriver: true,
        });
    };

    //artist profile image border color
    _getImageBorderColor = () => {
        const {scrollY} = this.state;

        return scrollY.interpolate({
            inputRange: [0, 140],
            outputRange: [MyColors.CARD_BG_COLOR, 'rgba(255,255,255,1)'],
            extrapolate: 'clamp',
            useNativeDriver: true,
        });
    };

    _getVipCardTop = () => {
        const {scrollY} = this.state;
        return scrollY.interpolate({
            inputRange: [0, 50],
            outputRange: [ThemeUtils.relativeHeight(37), ThemeUtils.relativeHeight(30)],
            extrapolate: 'clamp',
            useNativeDriver: true,
        });
    };

    _getVipCardOpacity = () => {
        const {scrollY} = this.state;
        return scrollY.interpolate({
            inputRange: [0, 50, 60],
            outputRange: [1, 1, 0],
            extrapolate: 'clamp',
            useNativeDriver: true,
        });
    };

    //Song list container position from top
    _getListViewTopPosition = () => {
        const {scrollY} = this.state;
        //TODO:   高度待处理
        return scrollY.interpolate({
            inputRange: [0, 250],
            outputRange: [ThemeUtils.relativeHeight(100) - ThemeUtils.relativeHeight(70), 0],
            extrapolate: 'clamp',
            useNativeDriver: true,
        });
    };

    //header title opacity
    _getHeaderTitleOpacity = () => {
        const {scrollY} = this.state;

        return scrollY.interpolate({
            inputRange: [0, 20, 50],
            outputRange: [0, 0.5, 1],
            extrapolate: 'clamp',
            useNativeDriver: true,
        });
    };

    //artist name opacity
    _getNormalTitleOpacity = () => {
        const {scrollY} = this.state;

        return scrollY.interpolate({
            inputRange: [0, 20, 30],
            outputRange: [1, 0.5, 0],
            extrapolate: 'clamp',
            useNativeDriver: true,
        });
    };
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    /*header style*/
    headerLeftIcon: {
        position: 'absolute',
        left: ThemeUtils.relativeWidth(2),
    },
    headerRightIcon: {
        position: 'absolute',
        right: ThemeUtils.relativeWidth(2),
    },
    headerStyle: {
        height: ThemeUtils.APPBAR_HEIGHT,
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
    },
    headerTitle: {
        textAlign: 'center',
        justifyContent: 'center',
        color: MyColors.HEADER_TEXT_COLOR,
        fontSize: ThemeUtils.fontNormal,
        fontWeight: 'bold',
    },
    /*Top Image Style*/
    headerImageStyle: {
        height: HEADER_IMAGE_HEIGHT,
        width: '100%',
        top: 0,
        alignSelf: 'center',
        position: 'absolute',
    },
    /*profile image style*/
    profileImage: {
        position: 'absolute',
        zIndex: 100,
    },
    /*profile title style*/
    profileTitle: {
        textAlign: 'center',
        color: MyColors.white,
        top: ThemeUtils.relativeHeight(29),
        left: 0,
        fontWeight: 'bold',
        right: 0,
        fontSize: 20,
    },
    /*song count text style*/
    songCountStyle: {
        position: 'absolute',
        textAlign: 'center',
        fontWeight: '400',
        top: ThemeUtils.relativeHeight(40),
        left: 0,
        right: 0,
        fontSize: ThemeUtils.fontNormal,
    },
    artistCardContainerStyle: {
        backgroundColor: MyColors.CARD_BG_COLOR,
        elevation: 5,
        shadowRadius: 3,
        shadowOffset: {
            width: 3,
            height: 3,
        },
        paddingVertical: 5,
        paddingHorizontal: 15,
        borderRadius: 6,
        marginBottom: 5,
        marginHorizontal: 15,
        flexDirection: 'row',
        alignItems: 'center',
    },
    artistImage: {
        height: ThemeUtils.relativeWidth(15),
        width: ThemeUtils.relativeWidth(15),
        borderRadius: ThemeUtils.relativeWidth(7.5),
        borderWidth: 1,
    },
    songTitleStyle: {
        fontSize: ThemeUtils.fontNormal,
        color: MyColors.BLACK,
    },
    cardTextContainer: {
        flex: 1,
        margin: ThemeUtils.relativeWidth(3),
    },
});

当然可能还存在部分适配问题，这个需要花时间去调一下，希望你喜欢这篇文章哦

villa_mou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Material Design之-交互效果炸裂的 FloatingActionMenu
weixin_34077371的博客
03-12 213
自Google推出Material Design设计规范之后，现在越来越多的App设计在参考它，Material Design中的FAB(Floating Action Button) 大家一定已经使用过了，那么，FloatingActionMenu呢？这篇文章就带大家一起来了解一下FloatingActionMenu以及它的使用。 1、什么是FAB(Floating Action Button...
这交互炸了系列：搞了个酷酷的效果
chuhe1989的博客
04-15 257
原文；https://mp.weixin.qq.com/s/UqMe80FCJJpczkuZTix-Hg 作者；鸿洋 这周我发现我的一个群里大家比较活跃，而且是在讨论技术问题，令我震惊，平时他们除了装逼就是黑我... 我怀着好奇的心情翻了下聊天记录，原来大家是被下面这个效果图吸引了： 乍一看好像没啥。 直到我看到效果图中的小船... 卧槽，可以。 然后为了大家更好的讨论，就把这个效...
react中竖直轮播滚动_用水平滚动视图React本地轮播
weixin_26715991的博客
08-16 2199
react中竖直轮播滚动 ScrollView：可以全部统治一个组件吗？ (ScrollView: One component to rule them all?) ScrollView is one of the most fundamental components of a React Native app, that can act as a standalone component as...
react native开发Android 篇——ScrollView和ViewPagerAndroid实现滑动翻页功能
辣辣的草莓酱
07-11 1172
react native开发Android 篇——利用ScrollView的scrollTo实现翻页功能 react-native官网地址：https://reactnative.cn/docs/scrollview/ 仿岛读APPgithub地址：https://github.com/liyamei123/IslandReadDemo onScrollBeginDrag 当用户开始拖动此视图...
【react-native】react-native如何实现瀑布流列表
GuoguoDad的博客
08-11 1296
在之前的react-native项目中，有瀑布流列表的需求，查阅了很多资料、网上看了很多种实现，其中看到了一个思路：用ScrollView嵌套VirtualizedList实现，如图红色表示ScrollView,蓝色表示VirtualizedList，看上去是一个列表，实则是3个列表，VirtualizedList的滚动事件全部委托给ScrollView进行处理!.....................
俩个页面交互
12-07
作用与俩个页面交互 数据！比如：从一个页面跳转到另一个页面，之后进行了js等操作后，改变前一个页面
这是一个交互开发文档
06-20
这是一个交互宽带费demom,
XDReamer不用写代码也可以做出交互的插件
05-10
XDReamer不用写代码也可以做出交互的插件
ChatGPT王炸更新！能联网获取新知识，可与5000+个应用交互
最新发布
04-05
前段时间OpenAI甩出了个王炸—— 宣布推出插件功能，赋予ChatGPT使用工具、联网、运行计算的能力。 例如在官方演示中，ChatGPT一旦接入数学知识引擎Wolfram Alpha，就再也不用担心数值计算不精准的问题。 并且还...
人机交互设计大作业.zip
05-27
人机交互设计大作业，人机交互大作业，人机交互作业。 人机交互设计大作业，人机交互大作业，人机交互作业。 人机交互设计大作业，人机交互大作业，人机交互作业。 人机交互设计大作业，人机交互大作业，人机...
React Native之ScrollView控件详解
热门推荐
xiangzhihong8的专栏
12-17 2万+
概述ScrollView在Android和ios原生开发中都比较常见，是一个 滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。 所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所
如何提升scroll等频繁触发事件的性能？
piziting的博客
08-15 3778
如何提升scroll等频繁触发事件的性能？ 对于scroll,resize,mousemove等事件，短时间可能被频繁触发，影响性能。若回调函数中涉及到元素重绘、DOM操作等耗时工作，可能导致在下一次scroll触发前回调未完成，造成掉帧。 解决方案 （一）防抖 让函数延迟触发，若在一定时间内再次触发事件，清除计时器，重新计时 适用场景：scroll停止事件，input输入ke...
ReactNative进阶（二十五）：ScrollView 滚动视图组件详解
IT全栈 华强工作室
05-13 4259
文章目录属性Style ScrollView 必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给 ScrollView 一个确定高度的话，要么直接给它设置高度（不建议，要么确定所有的父容器都有确定的高度。一般来说我们会给 ScrollView 设置 flex: 1， 以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了flex或者指定了高度，否则就会导致无法正常滚动，你可以使用元素查看器来查找具体哪一层高度不正确。
React中onscroll／onresize事件的绑定和解除
mapbar_front的博客
04-19 6414
问题描述 在react中，通常使用onscroll／onresize事件来处理一些操作，比如你要实现react中的懒加载技术，可能要使用这两个事件。 在挂载的周期函数中，通过addEventListener事件监听函数来绑定onscroll事件，在销毁期解除绑定的事件。 但是这样造成的结果就是——事件没有在销毁期销毁。 解决方案 一个比较好的方式，就是使用以下的方式进行解决： wi...
react-native ScrollView触摸与滚动事件
qq_30053399的博客
08-29 7859
ScrollView是我们常用的组件之一，因此搞清楚它的触摸与滚动事件十分重要！1.在ScrollView里面轻触一下（1）onStartShouldSetResponderCapture 这个属性接收一个回调函数，函数原型是 function(evt): bool，在触摸事件开始（touchDown）的时候，RN 容器组件会回调此函数，询问组件是否要劫持事件响应者设置，自己接收事件处理，
19.React Native动画效果操作集合四
Tiger的专栏
07-08 1286
目录 1.插值动画 1.1插值动画 1.2使用过程 2.动画组合 2.1Animated.parallel()并行启动动画 2.2Animated.sequence()按顺序启动动画 3.动画循环 4.跟踪动态值 5.跟踪手势 5.1Scroll滚动 6.响应当前的动画值 1.插值动画 1.1插值动画 每个属性都可以首先通过插值运行。插值将输入范围映射到输出范围，...
React Native下拉图片放大动画
大灰狼的小绵羊哥哥的博客
08-25 2049
# interpolate 插值动画，可以实现分段动画，绑定到event上非常流畅 下拉放大，上拉变成导航栏动画   2.gif 'use strict'; // 图片高度为255 class Demo extends Component { constructor(props) { super(props); this.state = { ...
React native sticky tab吸顶功能
yellowpig1210的专栏
10-19 1943
rn的吸顶实现思路和h5不同，且安卓可能有兼容性问题 思路一 使用ScrollView的stickyHeaderIndices属性 IOS支持，Android不支持 吸顶目标需要是Scrollview的第n+1个子节点 <ScrollView style={ s.container } onScroll = { this.onScroll } scrollEventThrottle = {1} showsVerticalScrollIndicator = ...
Android自定义ViewGroup第十二式之年年有鱼
陈小缘的博客
01-30 7618
前言 上个星期在鸿神的群里看到有群友截了一张QQ空间的图(我自己打开空间死活刷不出来，本来想放弃了，过了几天打开终于出现): 在好友动态的列表中多了个Header，这个Header有一叠卡片的效果，上面的卡片都可以跟随手指移动，还可以扔走，最好玩的是，拖拽卡片的时候，会有一种像是卡片被无形的东西牵住了一样，额，还是来看图吧： emmmm，用一句话把这个效果概括就是: 随手指移动的View还能在不...
如何开发一个交互式电影音频体验
04-05
要开发一个交互式电影音频体验，您可以按照以下步骤操作： 1. 确定您想要创建的交互式电影类型。您可以选择一个已有的电影或电视节目，或者您可以从头开始创作一个新的故事。 2. 开发一个脚本或剧本，其中包含您想...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值