EasyAnimCode
中文文档
This English documentation was translated by ChatGPT.
EasyAnimCode is an extension that adds animation transitions for daily operations in VSCode.
Features
- Adds animation effects to common operations in VSCode.
- Modifies the basic style of VSCode, bringing a more visually appealing experience.
- Currently confirmed to support Windows platform only (other platforms not yet tested).
- This plugin
v0.0.2
supports VSCode version 1.94
.
Installation
- Run VSCode as an administrator.
- Download and install EasyAnimCode from the VSCode extension marketplace, or manually install the
.vsix
file.
- Enable the animation effects by running the command
easy-anim-code.enable
via the VSCode Command Palette (Ctrl+Shift+P
). After the command executes, reload VSCode to apply the changes.
After reloading VSCode, you may receive a "corrupt installation" message because the plugin modifies the configuration files. If you do not wish to see this notification again, click the gear icon on the right side of the notification and choose to dismiss it.
Disabling the Extension
- Run VSCode as an administrator.
- Disable the animation effects by running the command
easy-anim-code.disable
via the VSCode Command Palette (Ctrl+Shift+P
). After the command executes, reload VSCode.
Disabling the extension will also reset its configuration.
Reset and Uninstall
Since the plugin modifies VSCode's local configuration files, you need to reset the settings before uninstalling to restore VSCode to its initial state. If you skip the reset step, the original VSCode state will not be restored after uninstalling the extension.
Note: Uninstalling the extension will not automatically restore VSCode's original state, so please run the reset command before uninstalling.
- Run VSCode as an administrator.
- Run the command
easy-anim-code.reset
via the VSCode Command Palette (Ctrl+Shift+P
) to reset settings to their default state. After the command executes, reload VSCode.
Reset Notice: If you wish to continue using the plugin after resetting, simply run easy-anim-code.enable
again.
Disabling the extension will reset its configuration.
VSCode Updates
After updating VSCode, you need to run the easy-anim-code.enable command again to enable the animation effects.
Extension Troubleshooting Guide
If the extension causes issues and damages VSCode's configuration files, you can try the following steps to repair the local files:
Repair Steps for Windows Users
VSCode 1.94 Version Repair Process
- Go to the VSCode installation directory.
- Locate the
resources\app\out\vs\code\electron-sandbox\workbench
folder.
- Find the files
workbench.esm.html
.
- Replace the content of these files with the templates provided below. After saving the changes, restart VSCode.
~~VSCode 1.93 Version Repair Process(The latest version is no longer supported)~~
- Go to the VSCode installation directory.
- Locate the
resources\app\out\vs\code\electron-sandbox\workbench
folder.
- Find the files
workbench.html
and workbench-apc-extension.html
.
- Replace the content of these files with the templates provided below. After saving the changes, restart VSCode.
workbench.esm.html
Template
<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
http-equiv="Content-Security-Policy"
content="
default-src
'none'
;
img-src
'self'
data:
blob:
vscode-remote-resource:
vscode-managed-remote-resource:
https:
;
media-src
'self'
;
frame-src
'self'
vscode-webview:
;
script-src
'self'
'unsafe-eval'
blob:
;
style-src
'self'
'unsafe-inline'
;
connect-src
'self'
https:
ws:
;
font-src
'self'
vscode-remote-resource:
vscode-managed-remote-resource:
https://*.vscode-unpkg.net
;
require-trusted-types-for
'script'
;
trusted-types
amdLoader
cellRendererEditorText
defaultWorkerFactory
diffEditorWidget
diffReview
domLineBreaksComputer
dompurify
editorGhostText
editorViewLayer
notebookRenderer
stickyScrollViewLayer
tokenizeToString
;
" />
</head>
<body aria-label=""></body>
<!-- Startup (do not modify order of script tags!) -->
<script
src="./workbench.js"
type="module"></script>
</html>
~~workbench.html
Template(The latest version is no longer supported.)~~
<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
http-equiv="Content-Security-Policy"
content="
default-src 'none';
img-src 'self' data: blob: vscode-remote-resource: vscode-managed-remote-resource: https:;
media-src 'self';
frame-src 'self' vscode-webview:;
script-src 'self' 'unsafe-eval' blob:;
style-src 'self' 'unsafe-inline';
connect-src 'self' https: ws:;
font-src 'self' vscode-remote-resource: vscode-managed-remote-resource: https://*.vscode-unpkg.net;
require-trusted-types-for 'script';
trusted-types
amdLoader
cellRendererEditorText
defaultWorkerFactory
diffEditorWidget
diffReview
domLineBreaksComputer
dompurify
editorGhostText
editorViewLayer
notebookRenderer
stickyScrollViewLayer
tokenizeToString;
" />
</head>
<body aria-label=""></body>
<!-- Startup (do not modify order of script tags !) -->
<script src="workbench.js"></script>
</html>
~~workbench-apc-extension.html
Template(The latest version is no longer supported.)~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body aria-label=""></body>
<!-- Startup (do not modify order of script tags!) -->
<script src="../../../patch/browser.main.js"></script>
<script src="workbench.js"></script>
</html>
If the above methods don't work, please try reinstalling VSCode.
Configuration Options
To avoid conflicts with users' theme plugins, EasyAnimCode provides several configuration options that allow users to customize the plugin settings as needed.
Since different users use different theme plugins, the default plugin may cause color and style conflicts with the user's theme.
Easy-anim-code.PrimaryColor
: Set the primary color of the extension.
Easy-anim-code.AnimLevel
: Adjust the intensity level of animations.
Easy-anim-code.BackgroundImage
: Set a global background image.
The path is an absolute path, and for the Windows platform, the path needs to be escaped, e.g., "C:\luoqixi\0614_11.png". Image paths do not support Chinese characters.
Easy-anim-code.BackgroundImageOpacity
: Adjust the opacity of the global background image.
Easy-anim-code.TerminalAnimation
: Enable or disable terminal animations.
The configuration values must be provided as hex color codes, and transparency is supported. If you modify the configuration, first run easy-anim-code.disable
, then run easy-anim-code.enable
and restart VSCode to apply the changes.
Please note: Every time you run the easy-anim-code.disable
command, the configuration will be reset to the default value.
Installing Other Versions to Support Lower Versions of VSCode
Plugin Version |
Corresponding VSCode Version |
Installation |
Documentation |
v0.0.4 |
1.94 |
Latest |
Latest |
v0.0.3 |
1.94 |
Link - Simply drag the visx package into VSCode |
Link |
v0.0.2 |
1.94 |
Link - Simply drag the visx package into VSCode |
Link |
v0.0.1 |
1.93 |
Link - Simply drag the visx package into VSCode |
Link |
Acknowledgments
Special thanks to the following plugins and CSS libraries for their inspiration and help in creating this project:
The creation of this plugin would not have been possible without the contributions of the above projects!
Interface Preview
Theme: Monokai Nocturne
Theme: Rainglow-Absent Contrast
Theme: XCode-default
Extension Page
Editor Page
Command Palette
Search
Settings
Code
Notifications
Easy-anim-code.AnimLevel set to High
Lists
BackgroundImage