Groups Overview – Google Web Designer



我叫Lucas
是一名Google Web Designer 工程师 在本视频中,我将演示如何使用群组功能 你可以运用群组功能将内容封装成 可重复使用的素材资源 我会用一个简单的示例 来说明这一点 我先在场景上添加一张图片和一些文字 输入文字后,稍微调整一下格式 将文字居中并变为粗体 稍微调整一下文本框的大小 好了,现在我选择这两个元素 点击右键,然后选择“创建群组” 并输入名称 “My Group” 现在素材资源库中 出现了表示这个群组的新条目 场景上的元素也已替换为此群组的一个实例 我可以用拖放的方式从素材资源库 添加新的实例 这里每个实例 都是对群组内容的引用 因此,如果修改任何一个实例 两个实例都会发生变化 比如,我先更改文字 再创建一个简单的动画 让文字逐渐淡出,直至不透明度变为0 然后再逐渐淡入,直至不透明度变为1 现在,如果播放动画 就能看出这两个实例完全相同 如果想要了解这背后的机理 可以切换至代码视图 代码视图中的这段代码 包含所有群组 对于我们的示例,这里只有一个群组 其中含有一张图片和一些文字 而这里的主要文档则包含我的两个实例 每个实例都是空白的div 通过名称引用了群组 发布文档时 群组的内容会注入每个实例中 确保所有实例都完全相同 群组可以包含任何 能在Google Web Designer中创建的内容 包括其他群组的实例 举例来说,我在这里添加另一个实例 然后为它加上边框,稍微改变下样式 接着再添加一个元素 例如div 最后选择这两个元素并再创建一个群组 跟之前一样,如果我修改其中一个实例 所有实例都会发生变化 无论实例在何处显示 如果删除场景上的所有实例 群组本身并不会随之消失 还是会保留在素材资源库中 我仍然可以在场景上添加其他实例 如果想完全删除某个群组 请右键点击素材资源库的相应群组
然后选择“删除” 这个上下文菜单还提供其他几个选项 例如我可以将群组重命名为 “Teapot” 可以复制群组,创建 内容与原始群组 完全相同的新群组 最后,你还能在单独的视图中修改群组 如果场景上没有任何实例 或者场景中的内容凌乱 而你又想单独查看群组 这个选项就能派上用场 我先选择这个选项,然后进行一些修改 我要为这个群组添加带颜色的背景 具体做法是画一个div 更改背景颜色 再将它向后移 完成修改后 只需点击面包屑导航路径的根目录
就能返回场景 这时可以看到所有实例 都体现了这些更改 如果我添加一个新的实例
它也会体现同样的更改 对群组功能的介绍到此结束 在下一个视频中,我会演示
如何通过在群组中添加事件 来为群组增加互动性 谢谢观看

1 thought on “Groups Overview – Google Web Designer

  1. Very helpful tutorial, thank you for the upload!
    Watch this video https://www.youtube.com/watch?v=jbYBrapX-Jc its also very useful!
    #masonsoiza

Leave a Reply

Your email address will not be published. Required fields are marked *