23 天前 / 冷星1024
一般来说，使用 imgcook 都是用来做一些静态的模块，但随着我们淘宝设计向沉浸式迈入，对于 imgcook 来说就不得不也进行一些动效的开发。 动效分解比如氛围滚动、比如 Feeds 商品的动效切换，比如最近我就在一个模块里开发了一个动效如下： 首先来分解动画， 将原商品图以左上角为基准缩小，同时将状态一的其他部分隐藏等待 1 完成后“可能喜欢”渐变显示出来右侧的推荐商品向左滑动完成动画 分解完毕后，是比较简单的，但是实际通过 imgcook 开发时，还是经历了不少学习的过程。
46 天前 / cxc_xinconan
前言 这个模块的画面感很强。今日前端早读课文章由阅文 @XboxYan 授权，公号：前端侦探分享。 @XboxYan，阅文体验设计部，专注用户体验相关，热爱 CSS，热爱原生，欢迎关注 github:https://github.com/XboxYan 正文从这开始～～ 介绍一个 CSS 动画合成小技巧。先看效果 这是一个非常 “动感” 的倒计时效果，在一些活动开场中比较常见，分析一下整个动画过程，不难发现，有以下几类动画 数字的变化 缩小和放大 透明度变化 不知道小伙伴能否观察出来呢？下面来一起来看看具体实现吧 一、数字的变化先来看数字的变化。
98 天前 / reesunhuang
全文建立在 MySQL 的存储引擎为 InnoDB 的基础上 先看一条 SQL 如何入库的： 这是一条很简单的更新 SQL，从 MySQL 服务端接收到 SQL 到落盘，先后经过了 MySQL Server 层和 InnoDB 存储引擎。 Server 层就像一个产品经理，分析客户的需求，并给出实现需求的方案。 InnoDB 就像一个基层程序员，实现产品经理给出的具体方案。 在 MySQL”分析需求，实现方案“的过程中，还夹杂着内存操作和磁盘操作，以及记录各种日志。 他们到底有什么用处？他们之间到底怎么配合的？MySQL 又为什么要分层呢？InnoDB 里面的那一块 Buffer Pool 又是什么？ 我们慢慢分析。
110 天前 / 冷星1024
前言一个合理的动画是良好用户体验中必不可少的一部分。我们平常是怎样写动画的？CSS 中的 animation 和 transition，还有 requestAnimationFrame？相信大家写动画的时候心里也是在万马奔腾。今天我们从一个另辟蹊径的角度来探索一个动画实现。 示例请看下面的示例： 这是一个可添加的数字的随机乱序列表。首先想一想，我们第一直觉可能会这样做：将这些数字的 DOM 节点用绝对定位来布局，数字变化后计算 top、left 的值，再配合 transition 实现该动画。
211 天前 / 冷星1024
关注公众号前端开发博客，领 27 本电子书 回复加群，自助秒进前端群 1. 前言以前在看微信视频号直播的时候，经常点击右下角的点赞按钮。看着它的数字慢慢从一位数变成五位数，还是挺有氛围感的。特别是长按的时候，有个手机震动的反馈，很带感。 虽然之前很好奇这些飘动的点赞动效是怎么实现的，但没有特别去钻研。直到前阵子投入腾讯课堂 H5 直播间的需求，需要自己去实现一个这样的效果时，才开始摸索。 先看看最后的效果： 相比视频号的点赞动效，轨迹复杂了很多。
243 天前 / 冷星1024
图片来源：https://colachan.com/post/3444 本文作者：Bermudarat[1] 前言在越来越多的业务中，前端页面除了展示数据和提供用户操作的 UI，也需要带给用户更丰富的交互体验。动画作为承载，已经成为日常前端开发，尤其是 C 端开发的必选项。设备硬件性能的提升、浏览器内核的升级也给在页面端实现流畅动画提供了可能。目前，常规设备的刷新频率通常是 60HZ，也就是说，如果要让用户感受不到明显卡顿，浏览器的渲染流水线需要每秒输出 60 张图片（60 FPS）。接下来，文章会从基础的渲染树出发，介绍浏览器渲染流水线，以及常用的优化动画性能的方法。
254 天前 / 虞大胆
PAG (Portable Animated Graphics) 是一套完整的动画工作流。它提供从 AE 导出插件，到桌面预览工具，再到各端的跨平台渲染 SDK，助力于将 AE 动画方便快捷的应用于各平台终端。PAG 目前是公司 AVGenerator OTeam 开源协同小组的核心组件之一，广泛应用于公司内外 40 余款主流 APP 或业务，涵盖 UI 动画、视频编辑、特效模板、服务端特效渲染等多个场景，于 2022 年 1 月开源至 GitHub。 PAG（Portable Animated Graphics）是腾讯自主研发的一套完整的动画工作流解决方案，助力于将 AE 动画方便快捷的应用于各平台终端。
281 天前 / 王键创生
阅读原文，体验更佳！ 周刊收集包括前端（但不限于前端）的文章、新闻、开源项目、工具等等，每周一更新。 发布 Taro 3.5 canary 发布：支持适配 鸿蒙 https://mp.weixin.qq.com/s/Hud405mLileIEzHX3Z-ueQ Next.js 强劲对手来了！ Remix 正式宣布开源 https://juejin.cn/post/7035952921208422436 文章为什么 Web3 与区块链有关互联网迄今有两个阶段：Web 1.0 和 Web 2.0。 下一个阶段自然就是 Web 3.0（简称 Web3）。本文谈谈我对 Web3 的一些初步理解，它到底是什么。
298 天前 / 公众号-Android开发编程
前言 动画的使用是 Android 开发中常用的知识 可是动画的种类繁多、使用复杂，每当需要采用自定义动画 实现 复杂的动画效果时，很多开发者就显得束手无策； 今天我们就来从源码中分析属性动画原理 一、动画简单应用 ValueAnimator 属性动画的最核心的类，原理：控制值的变化，之后手动赋值给对象的属性，从而实现动画； 对于控制的值的不同，Android 提供给我们三种构造方法来实例 ValueAnimator 对象： ValueAnimator.ofInt(int... values) -- 整型数值 ValueAnimator.ofFloat(float... values) -- 浮点型数值 ValueAnimator.ofObject(TypeEvaluator eval...
326 天前 / 冷星1024
动画在前端领域中的作用是提升用户体验、吸引用户注意力。在互联网行业中，它也是一个永久的热点话题。一般在电商平台或者娱乐类项目（快手、拼多多、淘宝、腾讯视频、抖音等）中会出现很多的动画场景。 那么通过本文，大家可以提高哪些方面的认知呢？ 前端人员实现动画的技术有哪些？每种动画的实现技术有什么特点，适合什么样的场景？拿到需求稿或者动画 demo 的时候，如何选择最合适的技术栈？（选择合适的技术栈在任何时候都是对程序员非常重要的一个考验）制作一系列的动画，各岗位的人该如何配合...
341 天前 / 公众号-Android开发编程
前言 所谓转场动画，通俗的讲就是一个 Activity 跳转到另一个 Activity 是的动画； Activity 的转场动画很早就有了，5.0 之前用的是 overridePendingTransition（）这个方法。在 5.0 之后，Google 使用 Material Design 设计风格，进而有了的新的转场转场动画的诞生，效果还是挺炫酷的； 今天我们就来讲解下； 一、转场动画兼容性 1、API21 之前 Activity 过渡动画使用 API21 之前 Activity 过渡动画通过两种方式来实现：style 主题里面统一设置、使用代码 overridePendingTransition 函数单独设置； style 文件主题里面统一定义...
494 天前 / Android开发编程
App 启动先进入一个闪屏页 (LaunchActivity)来展示应用信息， 当我们点击桌面图标启动 APP 时，有时会闪一下黑色背景，时间还比较长， 那我们该怎么办呢？怎么优化这个启动页呢？就有了今天这篇文章 一、APP 的启动方式：一般来说，APP 的启动方式主要分为两种：冷启动和热启动。 冷启动：启动应用时，后台没有该应用的进程，系统会重新创建一个新的进程分配给该应用，即冷启动； 热启动：启动应用时，后台已有该应用的进程（例如：点击 Back 键或 Home 键退出，此时应用的进程依然在后台存活），这时会在已有的进程中启动该应用...
746 天前 / 开发者头条
大家好，我是周刊菌。「码农周刊 VIP 会员」推出 21 周啦！感谢亲们的大力支持！第 021 期「码农周刊 VIP 会员专属邮件周报」已发送完毕，请注意查收。告诉大家一个好消息：已有数位上市公司 CTO 低调订阅了我们的「码农周刊 VIP 会员专属邮件周报」，感谢肯定！ 以下内容选自「码农周刊 VIP 会员」圈子，每日更新，精彩不断。 「码农周刊 VIP 会员」是什么？简介版码农周刊 VIP 会员 = 全年 52 期「VIP 会员专属邮件周报」 + 只限 VIP 会员加入的交流圈子 + 大厂「内推机会」 + N 多福利 详细版 点击「阅读原文」即可查看详细介绍 加入「码农周刊 VIP 会员...
808 天前 / semlinker
本文阿宝哥将给大家介绍十个 「“惊人"」 的文字动画效果，希望阿宝哥精心录制的十个 Gif 动画能让大家感到 「”惊艳“」，当然更希望这些特效能给大家实现文字动画效果时带来一些 「”灵感“」。 文字破碎动画示例说明：该示例会基于页面的设置的文字，产生文字破碎动画。 示例来源：Arsen Zbidniakov 在线地址：https://codepen.io/ARS/pen/pjypwd 「静态效果图」 「Gif 动态效果图」 文字彩虹效果示例说明：该示例会基于页面中的文字，产生文字效果。
817 天前 / semlinker
本文阿宝哥将给大家介绍十个 「“酷炫屌"」 的图像悬停效果，希望阿宝哥精心录制的十个 Gif 动画能让大家眼前一亮，当然更希望这些特效能给大家设计图片悬停效果带来一些 「”灵感“」。 感知方向的悬停效果示例说明：该示例会根据鼠标移入的方向展示不同的动画效果。 示例来源：Noel Delgado 在线地址：https://codepen.io/noeldelgado/pen/pGwFx 「静态效果图」 「Gif 动态效果图」 叠加运动悬停效应示例说明：当鼠标悬停在图片上时，会产生 3D 的堆叠运动效果。