最近投入了一个需求,遇到一个需要用动画去实现的场景。
我们的产品大大管它叫氛围气泡,在很多应用(淘宝、抖音、bilibili)的直播间场景都会有类似这样营造氛围感的组件,能够让你感知到其他用户在当前直播间的行为。
这个东西看起来转瞬即逝的,但背后其实是基于一套和 push 通道相关的设计:
前人栽树后人乘凉,所幸大佬们把 push 消息中心
和 后台服务
都建设得很完善,所以这次开发我只需要做这么一件事情:
设置监听 push 的回调,拿到数据渲染对应组件。
看上去好简单!让我来简单的评估一下它的开发成本:
这东西一进一出的,还扑棱扑棱的闪,好似一个轮播图。在公共组件库搜罗一下,找到了一个 Marquee(跑马灯)
组件,它是基于 swiper/react
去实现的。
swiper
大家都熟,一个功能非常强大且开箱即用的组件,目前已经迭代到了 v7 版本。它也支持在现代前端框架下的使用,例如说支持 React 。
在 React 中,我们可以给它初始化一堆幻灯片,让它可以滑动:
import SwiperCore, { Autoplay } from"swiper";
import { Swiper, SwiperSlide } from"swiper/react";
// Import Swiper styles
import"swiper/css";
import"swiper/css/navigation";
import"swiper/css/pagination";
import"swiper/css/scrollbar";
import"./styles.css";
// install Swiper modules
SwiperCore.use([Autoplay]);
const renderBubble = (bubble) => {
const { name, wording, btnText } = bubble;
return (
<SwiperSlide>
<p className="live-bubble">
<span className="live-bubble-username">{name}</span>
<span className="live-bubble-wording">{wording}</span>
<span className="live-bubble-action">{btnText}</span>
</p>
</SwiperSlide>
);
};
export default () => {
const dataList = [
{ name: "李*", wording: "咨询了课程", btnText: "去咨询" },
{ name: "黄*", wording: "领取了优惠券", btnText: "去领取" },
{ name: "高*", wording: "分享了直播间给好友", btnText: "去分享" },
{ name: "刘*", wording: "领取了直播间资料", btnText: "去领取" },
{ name: "朱*", wording: "购买了直播间课程《xxx》", btnText: "去领取" }
];
return (
<div style={{ background: "#000" }}>
<Swiper
slidesPerView={1}
direction="horizontal"
onSlideChange={() => console.log("slide change")}
autoplay
>
{dataList.map((item) => renderBubble(item))}
</Swiper>
</div>
);
};
设置了 autoplay,可以自动播放,效果如下:
你可能发现了,上面的示例跟想要实现的效果还差很远,我们需要的效果是:
接下来让我们逐个击破,改造一下 swiper。
autoplay 除了支持自动播放,还可以设置自动播放的方向。比如说,当 direction
为 horizontal
的时候,每个滑块默认是向左退出和进入的,即从右至左轮播。如果想要变成相反方向,可以这样设置:
autoplay={{
delay: 3000,
reverseDirection: true
}}
关于 swiper 切换效果的定制,官方也提供了一些切换效果相关的 api: effect 。
其中比较符合我们要求的应该是 creativeEffect
,创造性的切换效果。我们目前想要定制一套渐隐退出和滑动渐现进入的效果。
我们再设置一下 swiper 的参数:
<Swiper
slidesPerView={1}
direction="horizontal"
onSlideChange={() =>console.log("slide change")}
autoplay={{
delay: 3000,
reverseDirection: true
}}
loop
speed={3000}
effect={"creative"}
creativeEffect={{
prev: {
opacity: 0,
translate: ['-300%', 0, 0]
},
next: {
opacity: 0
}
}}
>
prev 和 next 的具体参数类型可以参考 swiper creativeEffect ,比如说上面示例中 creativeEffect
的意思是:
进入动画的起始状态(prev):
translate:[’-300%‘, 0, 0],表示一开始在 x 轴的 -300% swiper 宽度的位置上
opacity:0,表示一开始透明不可见
退出动画的结束状态(next):
opacity:0,表示结束时透明不可见
经过我们的改造,最终效果如下:
上面的效果其实并没有完全满足我们的要求,我们可以观察到 swiper 的幻灯片进入和退出有这样的特点:会有某一段时间,上一张幻灯片和下一张幻灯片会同时存在于可视区域。
这个会导致我们的滑动渐现进入效果不能完美实现,只能通过调整起始位置到尽可能远,来拟合我们想要的效果。像上面其实就设置了 -300%,才达到了比较理想的效果。与之相对的,也带来了另一个问题:透明度变化太快了,进入可视区域时幻灯片的 opacity 已经接近 1 了。
这下可把我整不会了,没想到 swiper 还有这样的局限性。但幻灯片切换效果不佳并不是最主要的,更重要的还是氛围气泡业务逻辑的实现,我们看看结合 push 命令,动态更新幻灯片数量的情况下,swiper 在 react 中的状态管理会变得多不堪。
在实际业务使用中,其实还遇到了优先级展示的问题,氛围气泡的位置一共有三个组件在轮流展示:
如果我们需要动态插入氛围气泡的话,就会有两种情况:
比如说以下的业务代码:
// 氛围气泡推送监听
onAtmosphereBubble((data) => {
// 未展示前,缓存气泡到状态中
if (this.state.chatBoxTopIndex === 0) {
this.setState((prev) => ({
bubbleList: [
data,
...prev.bubbleList,
],
}));
} elseif (this.state.chatBoxTopIndex === 1) {
// 展示中,通过 swiper 实例插入幻灯片
this.addBubble(data);
} else {
// 即将展示,向状态中插入幻灯片
this.setState((prev) => ({
bubbleList: [
data,
...prev.bubbleList,
],
}));
this.nextChatBoxTop(1);
}
});
const addBubble = (data) => {
this.swiper?.prependSlide('<div class="swiper-slide">new Slide</div>');
};
从这里就能看出来,在 react 中,如果需要动态更新幻灯片的场景,使用 swiper 相当不合适。原因是 swiper 是通过示例方法去更新 UI,而 react 是通过 数据(状态)去更新 UI 的,两者不太兼容。
除此之外,实践中也发现了很多其他的问题,比如说:
总的来说,swiper 在这个需求里表现得不是很好,使用它反而会让代码变得复杂。既然没有现有的组件可以复用,我们可以怎么另辟蹊径呢?接下来就来到本文的正题了,我们来通过一个神奇的 React 动画库来实现我们的需求。
react-transition-group
是 React 官方实现的,用于操作过渡效果的组件库。它可以在组件安装和卸载时,增加过渡效果。一共提供了 4 个 api,上手成本极低。
我们首先从单个组件切换的场景入手,比如说现在希望为一个组件增加进入和退出的动画,就可以使用 Transition 或者 CSSTransition。
Transition 组件是一个自由度比较高的组件,CSSTransition 也是基于它扩展的。它通过 in 参数跟踪组件的进入和退出(或者说显隐),并由开发者自定义动画样式。
话不多说,我们直接上代码。下面设计了一个按钮点击来控制组件进入退出的示例:
import React, { useState } from"react";
import { Transition } from"react-transition-group";
import"./styles.css";
const duration = 500;
const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0
};
const transitionStyles = {
entering: { opacity: 1 },
entered: { opacity: 1 },
exiting: { opacity: 0 },
exited: { opacity: 0 }
};
exportdefaultfunction App() {
const [inProp, setInProp] = useState(false);
return (
<div>
<Transition in={inProp} timeout={duration}>
{(state) => (
<div
style={{
...defaultStyle,
...transitionStyles[state]
}}
>
I'm a fade Transition!
</div>
)}
</Transition>
<button onClick={() => setInProp((prev) => !prev)}>Click to Enter</button>
</div>
);
}
效果如下:
Transition 包含了以下参数:
timeout={500}
// or
timeout={{
appear: 500,
enter: 300,
exit: 500,
}}
children 函数:提供了一个 state 参数的 children 函数,用于渲染我们的组件。其中 state 包括了以下状态:
'entering'
'entered'
'exiting'
'exited'
开始动画的三个钩子,均接收一个回调函数 Function(node: HtmlElement, isAppearing: bool) -> void
,回调函数接收 2 个参数,第一个参数为当前元素的 dom 节点,第二个参数表示当前动画是否为元素初次挂载时发生
onEnter:在动画状态变为 entering 之前调用
onEntering:在动画状态变为 entering 之后调用
onEntered:在动画状态变为 entered 之后调用
离开动画的三个钩子,均接收一个回调函数 Function(node: HtmlElement) -> void
,回调函数仅接收当前元素的 dom 节点
onExit:在动画状态变为 exiting 之前调用
onExiting:在动画状态变为 exiting 之后调用
onExited:在动画状态变为 exited 之后调用
......
通过上面 Transition 的例子,我们也看到了,组件当前的 class 是由 children 函数中的 state 参数来决定的,写法上不够 auto。CSSTransition 组件解决了这一问题,它继承了 Transition 组件,并简化了 className 的声明。
同理,我们上一段代码看看区别,依然是刚才的例子:
import React, { useState } from"react";
import { CSSTransition } from"react-transition-group";
import"./styles.scss";
const duration = 300;
exportdefaultfunction App() {
const [inProp, setInProp] = useState(false);
return (
<div>
<CSSTransition in={inProp} timeout={duration} classNames="my-fade">
<p className="my-fade">I'm a fade Transition!</p>
</CSSTransition>
<button onClick={() => setInProp((prev) => !prev)}>Click to Enter</button>
</div>
);
}
.my-fade {
opacity: 0;
&-enter { opacity: 0 }
&-enter-active {
opacity: 1;
transition: opacity 300ms;
}
&-enter-done {
opacity: 1;
}
&-exit { opacity: 1 }
&-exit-active {
opacity: 0;
transition: opacity 300ms;
}
&-exit-done {
opacity: 0;
}
};
效果依然是:
CSSTransition 会根据 in 参数的变化,为组件添加不同的 class。例如,当 in 变为 true,会先后为组件添加 {classNames}-enter、{classNames}-enter-active、{classNames}-enter-done 的 class,形成入场的动画效果;当 in 变为 false,则会为组件添加 {classNames}-exit、{classNames}-exit-active、{classNames}-exit-done 的 class,形成退场的动画效果。
CSSTransition 默认有三个阶段 —— 消失(appear)、进入(enter)、离开(exit)。并且每个阶段都先后添加三个类名,以 enter 为例,分别是:
CSSTransition 的参数跟 Transition 差别不大,需要注意的是 classNames
这个参数。为了与 React 中的 className 进行区别,classNames
这个参数在 className
的基础上在末尾加了个 s
。
一般来说,这个参数将作为动画过渡的一系列类名(-enter、-enter-active、-enter-done、......)的前缀。
classNames="my-fade"
// my-fade-enter
// my-fade-enter-active
// my-fade-enter-done
// ......
但也支持对每个类名单独定义:
classNames={{
appear: 'my-appear',
appearActive: 'my-active-appear',
appearDone: 'my-done-appear',
enter: 'my-enter',
enterActive: 'my-active-enter',
enterDone: 'my-done-enter',
exit: 'my-exit',
exitActive: 'my-active-exit',
exitDone: 'my-done-exit',
}}
SwitchTransition 用于包裹 Transition 或 CSSTransition 组件,并修改它们内部组件的过渡模式。它拥有一个 mode
参数,可以实现两种效果:
out-in
:当前元素先转出,然后当完成时,新元素转入。in-out
:新元素首先转入,然后当完成时,当前元素转出。默认: 'out-in'
同样上代码来看看效果:
import React, { useState } from"react";
import { CSSTransition, SwitchTransition } from"react-transition-group";
import { Button, Form } from"react-bootstrap";
import"./styles.scss";
const modes = ["out-in", "in-out"];
exportdefaultfunction App() {
const [mode, setMode] = useState("out-in");
const [state, setState] = useState(true);
return (
<div>
<div className="label">Mode:</div>
<div className="modes">
{modes.map((m) => (
<Form.Check
key={m}
custom
inline
label={m}
id={`mode=msContentScript${m}`}
type="radio"
name="mode"
checked={mode === m}
value={m}
onChange={(event) => {
setMode(event.target.value);
}}
/>
))}
</div>
<div className="main">
<SwitchTransition mode={mode}>
<CSSTransition
key={state}
addEndListener={(node, done) => {
node.addEventListener("transitionend", done, false);
}}
classNames="fade"
>
<div className="button-container">
<Button onClick={() => setState((state) => !state)}>
{state ? "Hello, world!" : "Goodbye, world!"}
</Button>
</div>
</CSSTransition>
</SwitchTransition>
</div>
</div>
);
}
body {
padding: 2rem;
font-family: sans-serif;
text-align: center;
}
.label {
margin-bottom: 0.5rem;
}
.modes {
margin-bottom: 1rem;
}
.button-container {
margin-bottom: 0.5rem;
}
.fade {
&-enter .btn {
opacity: 0;
transform: translateX(-100%);
}
&-enter-active .btn {
opacity: 1;
transform: translateX(0%);
}
&-exit .btn {
opacity: 1;
transform: translateX(0%);
}
&-exit-active .btn {
opacity: 0;
transform: translateX(100%);
}
&-enter-active .btn,
&-exit-active .btn {
transition: opacity 500ms, transform 500ms;
}
}
效果如下:
从这里可以看出和 swiper 的区别,swiper 类似于 in-out
的效果,而我们希望实现的氛围气泡是 out-in
的效果。
顾名思义,TransitionGroup
是用来管理多个 Transition/CSSTransition 的。当需要管理多个 Transition,即需要实现不同的动画效果时,适合使用它。
<TransitionGroup>
{list.map(({ id }) => (
<CSSTransition
key={id}
timeout={300}
classNames="my"
>
<MyComponent key={id}/>
</CSSTransition>
))}
</TransitionGroup>
了解了 react-transition-group
之后,我们很容易联想到,可以用 CSSTransition + SwitchTransition(out-in mode) 实现我们的需求。
但在实现之前,还需要定义一下我们的数据结构。
气泡是随着用户的交互,从客户端触发上报给到后台,再由后台反馈到其他客户端的。由于上文提到氛围气泡不是常驻的,会去展示其他的组件,所以当后台反馈了新的气泡数据,会存在三种情况:
显然是一个 队列
,我们可以维护一个气泡的 JSX 元素数组,用一个 index 来决定当前展示的气泡来实现切换渲染,并将不断到来的气泡数据插入到数组的尾部。
这样的好处在于,相比 swiper/react 通过状态和实例来维护气泡的方式,我们统一使用状态来维护气泡数据更加符合数据驱动视图的思想。
我们将气泡列表的展示顺序(index)放到 props 中维护,使之变成受控的。并在队列中维护一个定时器,定时触发 props 中的 nextBubble 方法去更新 index。如下:
import React, { useEffect, useCallback } from"react";
import { CSSTransition, SwitchTransition } from"react-transition-group";
import"./index.css";
const AtmosphereBubbleSequence = ({
bubbleList,
index,
setCurIndex,
nextBubble,
next,
resetList
}) => {
const bubbleListLength = bubbleList.length;
let curIndex = 0;
if (index > -1 && index < bubbleListLength) {
curIndex = index;
} else {
curIndex = bubbleListLength - 1;
setCurIndex(curIndex);
}
useEffect(() => {
// 定时触发
const interval = setInterval(() => {
nextBubble();
}, 3000);
return() => {
clearInterval(interval);
};
}, []);
const onExited = useCallback(
(node) => {
if (+node.dataset.bubbleKey === bubbleListLength - 1) {
// 切换到兜底组件
next();
// 清空气泡列表
resetList();
}
},
[bubbleListLength, next, resetList]
);
return (
<SwitchTransition>
<CSSTransition
key={bubbleList[index]?.type?.name + index || Math.random()}
timeout={{
enter: 300,
exit: 300
}}
classNames="atmosphere-bubble-cnt"
unmountOnExit
onExited={onExited}
>
<div data-bubble-key={index} className="atmosphere-bubble-cnt">
{bubbleList[index]}
</div>
</CSSTransition>
</SwitchTransition>
);
};
export default AtmosphereBubbleSequence;
值得注意的是,需要在 onExited 回调中去判断气泡列表是否已经展示完毕,调用销毁气泡序列组件的方法,并清空气泡数据列表,去展示其他的组件。
同时,我们设置气泡的样式如下:
.atmosphere-bubble-cnt {
padding: 016px;
}
.atmosphere-bubble-cnt-enter {
opacity: 0;
transform: translate3d(-60px, 0, 0);
}
.atmosphere-bubble-cnt-enter-active {
opacity: 1;
transform: translate3d(0, 0, 0);
transition: opacity 300ms, transform 300ms;
}
.atmosphere-bubble-cnt-exit {
opacity: 1;
}
.atmosphere-bubble-cnt-exit-active {
opacity: 0;
transition: opacity 300ms;
}
为了试验效果,我们在外部设置一段 mock 逻辑,来模拟不断塞入气泡数据的情况:
import React, { useEffect, useState } from"react";
import Bubble from"./Bubble";
import AtmosphereBubbleSequence from"./Sequence";
import"./styles.css";
exportdefaultfunction App() {
const [index, setIndex] = useState(0);
const [bubbleDataList, setBubbleDataList] = useState([
{ nick: "李*", content: "咨询了课程", eventMsg: "去咨询" },
{ nick: "黄*", content: "领取了优惠券", eventMsg: "去领取" },
{ nick: "高*", content: "分享了直播间给好友", eventMsg: "去分享" },
{ nick: "刘*", content: "领取了直播间资料", eventMsg: "去领取" },
{ nick: "朱*", content: "购买了直播间课程《xxx》", eventMsg: "去领取" }
]);
useEffect(() => {
const interval = setInterval(() => {
setBubbleDataList((prev) => [
...prev,
{ nick: "朱*", content: "购买了直播间课程《xxx》", eventMsg: "去领取" }
]);
}, 3000);
return() => {
clearInterval(interval);
};
}, []);
if (!bubbleDataList.length) {
returnnull;
}
const nextBubble = (newIndex) => {
setIndex((prevIndex) => {
returntypeof newIndex === "undefined" ? prevIndex + 1 : newIndex;
});
};
return (
<div
style={{
background: "#000",
height: "56px",
display: "flex",
alignItems: "center"
}}
>
<AtmosphereBubbleSequence
bubbleList={bubbleDataList.map((data) => (
<Bubble data={data} />
))}
index={index}
setCurIndex={setIndex}
nextBubble={nextBubble}
/>
</div>
);
}
接着来看看效果:
很好,已经实现我们想要的效果了!
在本文我们接触到了 swiper 和 react-transition-group 的使用,并分别用它们实现了氛围气泡需求。
虽然 swiper 有这样的局限性,但这一问题并不是不能解决的,还是有 hack 技巧的。比如说,可以先把 swiper-container 先渐隐,再触发幻灯片切换,并在中途增加动画类实现渐现。只是说这段 js 逻辑不太优雅而已:
componentDidMount() {
const { next, setBubbleList } = this.props;
const swiperIns = this.swiper;
const interval = setInterval(() => {
swiperIns.$wrapperEl?.addClass('swiperFadeOut');
delay(300)
.then(() => {
if (swiperIns.activeIndex === 0) {
clearInterval(interval);
next(2);
setBubbleList();
thrownewError('退出动画');
}
// 设置上一个滑块为透明隐藏
(swiperIns.slides[swiperIns.activeIndex] as HTMLElement).style.opacity = '0';
swiperIns.slidePrev(500);
return delay(300);
})
.then(() => {
swiperIns.$wrapperEl.addClass('swiperFadeIn');
return delay(200);
})
.then(() => {
swiperIns.$wrapperEl.removeClass('swiperFadeOut');
swiperIns.$wrapperEl.removeClass('swiperFadeIn');
})
.catch((error) => {
if (error.message === '退出动画') {
console.log('已退出');
}
});
}, 2000);
}
由此也可以发现,在状态管理方面:
面对类似氛围气泡的需求,如何选择 swiper 和 react-transition-group 这两类实现方案?
其实只要观察,数据列表的长度是静态的,还是会动态改变的。
其中原因,相信你已经有所理解~
swiper 氛围气泡
Transition demo
CSSTransition demo
SwitchTransition demo
基于 react-transition-group 的氛围气泡
本文由哈喽比特于3年以前收录,如有侵权请联系我们。
文章来源:https://mp.weixin.qq.com/s/7maQP3LbIj_XZoHogfUIpA
京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而,京东官方通过微博发言人发布的消息澄清了这些传言,称这些言论纯属虚假信息和蓄意捏造。
日前,据博主“@超能数码君老周”爆料,国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。
据报道,荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦(ASML)CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。
今年早些时候,抖音悄然上线了一款名为“青桃”的 App,Slogan 为“看见你的热爱”,根据应用介绍可知,“青桃”是一个属于年轻人的兴趣知识视频平台,由抖音官方出品的中长视频关联版本,整体风格有些类似B站。
日前,威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”,同时,他发文表示:中国汽车普及率低于非洲国家尼日利亚,每百户家庭仅17户有车。意大利世界排名第一,每十户中九户有车。
近日,一项新的研究发现,维生素 C 和 E 等抗氧化剂会激活一种机制,刺激癌症肿瘤中新血管的生长,帮助它们生长和扩散。
据媒体援引消息人士报道,苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后,3D系统一度大涨超10%,不过截至周三收盘,该股涨幅回落至2%以内。
9月2日,坐拥千万粉丝的网红主播“秀才”账号被封禁,在社交媒体平台上引发热议。平台相关负责人表示,“秀才”账号违反平台相关规定,已封禁。据知情人士透露,秀才近期被举报存在违法行为,这可能是他被封禁的部分原因。据悉,“秀才”年龄39岁,是安徽省亳州市蒙城县人,抖音网红,粉丝数量超1200万。他曾被称为“中老年...
9月3日消息,亚马逊的一些股东,包括持有该公司股票的一家养老基金,日前对亚马逊、其创始人贝索斯和其董事会提起诉讼,指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。
据消息,为推广自家应用,苹果现推出了一个名为“Apps by Apple”的网站,展示了苹果为旗下产品(如 iPhone、iPad、Apple Watch、Mac 和 Apple TV)开发的各种应用程序。
特斯拉本周在美国大幅下调Model S和X售价,引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金(Future Fund)管理合伙人加里·布莱克发帖称,降价是一种“短期麻醉剂”,会让潜在客户等待进一步降价。
据外媒9月2日报道,荷兰半导体设备制造商阿斯麦称,尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效,但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。
近日,根据美国证券交易委员会的文件显示,苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元(约 4.65 亿元人民币)。用于在 2023-2025 年期间,发射卫星,进一步扩展苹果 iPhone 系列的 SOS 卫星服务。
据报道,马斯克旗下社交平台𝕏(推特)日前调整了隐私政策,允许 𝕏 使用用户发布的信息来训练其人工智能(AI)模型。新的隐私政策将于 9 月 29 日生效。新政策规定,𝕏可能会使用所收集到的平台信息和公开可用的信息,来帮助训练 𝕏 的机器学习或人工智能模型。
9月2日,荣耀CEO赵明在采访中谈及华为手机回归时表示,替老同事们高兴,觉得手机行业,由于华为的回归,让竞争充满了更多的可能性和更多的魅力,对行业来说也是件好事。
《自然》30日发表的一篇论文报道了一个名为Swift的人工智能(AI)系统,该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。
近日,非营利组织纽约真菌学会(NYMS)发出警告,表示亚马逊为代表的电商平台上,充斥着各种AI生成的蘑菇觅食科普书籍,其中存在诸多错误。
社交媒体平台𝕏(原推特)新隐私政策提到:“在您同意的情况下,我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”
2023年德国柏林消费电子展上,各大企业都带来了最新的理念和产品,而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。
罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品,具体内容为:“以我对我‘子公司’的了解,我认为 iPhone 15 跟 iPhone 14 不会有什么区别的,除了序(列)号变了,这个‘不要脸’的东西,这个‘臭厨子’。